@rio-cloud/rio-uikit 2.0.1 → 2.2.0

package/components/menuItems/MenuItem.d.ts

@@ -1,7 +1,16 @@
 import { default as React } from 'react';
 export type MenuItemProps = {
+    /**
+     * __Internal prop__ - The item index.
+     */
     index?: number;
+    /**
+     * The menu item element which will be shown in the dropdown menu.
+     */
     value?: string | React.ReactNode;
+    /**
+     * Sets the item as active/selected.
+     */
     active?: boolean;
     /**
      * Setting "disabled" to true will disable the respective item.
@@ -15,15 +24,29 @@ export type MenuItemProps = {
      * @default false
      */
     divider?: boolean;
+    /**
+     * Will treat the given value as a menu header.
+     *
+     * @default false
+     */
     header?: boolean;
     /**
      * Callback function triggered when an item is selected.
+     *
      * @param value
      * @param event
      * @returns
      */
     onSelect?: (value: number | undefined, event: React.MouseEvent<HTMLLIElement>) => void;
+    /**
+     * __Internal prop__ - Callback function triggered when the item is selected.
+     */
     closeMenu?: VoidFunction;
+    /**
+     * __Internal prop__ - Callback function triggered when the item is hovered and not disabled.
+     * @param event
+     * @returns
+     */
     onMouseEnter?: (event: React.MouseEvent<HTMLLIElement>) => void;
 };
 declare const MenuItem: (props: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/components/menuItems/MenuItem.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import M from "react";
-import b from "classnames";
 import { noop as r } from "es-toolkit/function";
+import b from "../../utils/classNames.js";
 import x from "../dropdown/DropdownSubmenu.js";
 import E from "../selects/DropdownHeader.js";
 const k = (l) => {

package/components/menuItems/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../src/components/menuItems/MenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport DropdownSubmenu from '../dropdown/DropdownSubmenu';\nimport DropdownHeader from '../selects/DropdownHeader';\n\nexport type MenuItemProps = {\n    index?: number;\n    value?: string | React.ReactNode;\n    active?: boolean;\n\n    /**\n     * Setting \"disabled\" to true will disable the respective item.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Will add a divider line between the items inside the dropdown.\n     *\n     * @default false\n     */\n    divider?: boolean;\n    header?: boolean;\n\n    /**\n     * Callback function triggered when an item is selected.\n     * @param value\n     * @param event\n     * @returns\n     */\n    onSelect?: (value: number | undefined, event: React.MouseEvent<HTMLLIElement>) => void;\n    closeMenu?: VoidFunction;\n    onMouseEnter?: (event: React.MouseEvent<HTMLLIElement>) => void;\n};\n\nconst MenuItem = (props: MenuItemProps) => {\n    const {\n        index,\n        value,\n        divider = false,\n        disabled = false,\n        active = false,\n        header = false,\n        onSelect = noop,\n        closeMenu = noop,\n        onMouseEnter = noop,\n    } = props;\n\n    if (React.isValidElement(value) && value.type === DropdownSubmenu) {\n        return value;\n    }\n\n    const role = divider ? 'separator' : 'presentation';\n\n    const classes = classNames(divider && 'divider pointer-events-none', disabled && 'disabled', active && 'active');\n\n    const handleSelectItem = (event: React.MouseEvent<HTMLLIElement>) => {\n        if (!disabled) {\n            onSelect(index, event);\n\n            if (closeMenu) {\n                closeMenu();\n            }\n        }\n    };\n\n    const handleItemMouseEnter = (event: React.MouseEvent<HTMLLIElement>) => {\n        if (!disabled) {\n            onMouseEnter(event);\n        }\n    };\n\n    if (header) {\n        return <DropdownHeader label={value} center={false} />;\n    }\n\n    return (\n        <li\n            role={role}\n            className={classes}\n            onClick={handleSelectItem}\n            onMouseEnter={handleItemMouseEnter}\n            data-item-index={index}\n        >\n            <a role='menuitem'>{value}</a>\n        </li>\n    );\n};\n\nexport default MenuItem;\n"],"names":["MenuItem","props","index","value","divider","disabled","active","header","onSelect","noop","closeMenu","onMouseEnter","React","DropdownSubmenu","role","classes","classNames","handleSelectItem","event","handleItemMouseEnter","jsx","DropdownHeader"],"mappings":";;;;;;AAsCA,MAAMA,IAAW,CAACC,MAAyB;AACvC,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,QAAAC,IAAS;AAAA,IACT,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAWC;AAAA,IACX,WAAAC,IAAYD;AAAA,IACZ,cAAAE,IAAeF;AAAA,EAAA,IACfR;AAEJ,MAAIW,EAAM,eAAeT,CAAK,KAAKA,EAAM,SAASU;AAC9C,WAAOV;AAGX,QAAMW,IAAOV,IAAU,cAAc,gBAE/BW,IAAUC,EAAWZ,KAAW,+BAA+BC,KAAY,YAAYC,KAAU,QAAQ,GAEzGW,IAAmB,CAACC,MAA2C;AACjE,IAAKb,MACDG,EAASN,GAAOgB,CAAK,GAEjBR,KACAA,EAAA;AAAA,EAGZ,GAEMS,IAAuB,CAACD,MAA2C;AACrE,IAAKb,KACDM,EAAaO,CAAK;AAAA,EAE1B;AAEA,SAAIX,IACO,gBAAAa,EAACC,GAAA,EAAe,OAAOlB,GAAO,QAAQ,IAAO,IAIpD,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAAN;AAAA,MACA,WAAWC;AAAA,MACX,SAASE;AAAA,MACT,cAAcE;AAAA,MACd,mBAAiBjB;AAAA,MAEjB,UAAA,gBAAAkB,EAAC,KAAA,EAAE,MAAK,YAAY,UAAAjB,EAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AAGtC;"}
+{"version":3,"file":"MenuItem.js","sources":["../../../src/components/menuItems/MenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport DropdownSubmenu from '../dropdown/DropdownSubmenu';\nimport DropdownHeader from '../selects/DropdownHeader';\n\nexport type MenuItemProps = {\n    /**\n     * __Internal prop__ - The item index.\n     */\n    index?: number;\n\n    /**\n     * The menu item element which will be shown in the dropdown menu.\n     */\n    value?: string | React.ReactNode;\n\n    /**\n     * Sets the item as active/selected.\n     */\n    active?: boolean;\n\n    /**\n     * Setting \"disabled\" to true will disable the respective item.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Will add a divider line between the items inside the dropdown.\n     *\n     * @default false\n     */\n    divider?: boolean;\n\n    /**\n     * Will treat the given value as a menu header.\n     *\n     * @default false\n     */\n    header?: boolean;\n\n    /**\n     * Callback function triggered when an item is selected.\n     *\n     * @param value\n     * @param event\n     * @returns\n     */\n    onSelect?: (value: number | undefined, event: React.MouseEvent<HTMLLIElement>) => void;\n\n    /**\n     * __Internal prop__ - Callback function triggered when the item is selected.\n     */\n    closeMenu?: VoidFunction;\n\n    /**\n     * __Internal prop__ - Callback function triggered when the item is hovered and not disabled.\n     * @param event\n     * @returns\n     */\n    onMouseEnter?: (event: React.MouseEvent<HTMLLIElement>) => void;\n};\n\nconst MenuItem = (props: MenuItemProps) => {\n    const {\n        index,\n        value,\n        divider = false,\n        disabled = false,\n        active = false,\n        header = false,\n        onSelect = noop,\n        closeMenu = noop,\n        onMouseEnter = noop,\n    } = props;\n\n    if (React.isValidElement(value) && value.type === DropdownSubmenu) {\n        return value;\n    }\n\n    const role = divider ? 'separator' : 'presentation';\n\n    const classes = classNames(divider && 'divider pointer-events-none', disabled && 'disabled', active && 'active');\n\n    const handleSelectItem = (event: React.MouseEvent<HTMLLIElement>) => {\n        if (!disabled) {\n            onSelect(index, event);\n\n            if (closeMenu) {\n                closeMenu();\n            }\n        }\n    };\n\n    const handleItemMouseEnter = (event: React.MouseEvent<HTMLLIElement>) => {\n        if (!disabled) {\n            onMouseEnter(event);\n        }\n    };\n\n    if (header) {\n        return <DropdownHeader label={value} center={false} />;\n    }\n\n    return (\n        <li\n            role={role}\n            className={classes}\n            onClick={handleSelectItem}\n            onMouseEnter={handleItemMouseEnter}\n            data-item-index={index}\n        >\n            <a role='menuitem'>{value}</a>\n        </li>\n    );\n};\n\nexport default MenuItem;\n"],"names":["MenuItem","props","index","value","divider","disabled","active","header","onSelect","noop","closeMenu","onMouseEnter","React","DropdownSubmenu","role","classes","classNames","handleSelectItem","event","handleItemMouseEnter","jsx","DropdownHeader"],"mappings":";;;;;;AAkEA,MAAMA,IAAW,CAACC,MAAyB;AACvC,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,QAAAC,IAAS;AAAA,IACT,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAWC;AAAA,IACX,WAAAC,IAAYD;AAAA,IACZ,cAAAE,IAAeF;AAAA,EAAA,IACfR;AAEJ,MAAIW,EAAM,eAAeT,CAAK,KAAKA,EAAM,SAASU;AAC9C,WAAOV;AAGX,QAAMW,IAAOV,IAAU,cAAc,gBAE/BW,IAAUC,EAAWZ,KAAW,+BAA+BC,KAAY,YAAYC,KAAU,QAAQ,GAEzGW,IAAmB,CAACC,MAA2C;AACjE,IAAKb,MACDG,EAASN,GAAOgB,CAAK,GAEjBR,KACAA,EAAA;AAAA,EAGZ,GAEMS,IAAuB,CAACD,MAA2C;AACrE,IAAKb,KACDM,EAAaO,CAAK;AAAA,EAE1B;AAEA,SAAIX,IACO,gBAAAa,EAACC,GAAA,EAAe,OAAOlB,GAAO,QAAQ,IAAO,IAIpD,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAAN;AAAA,MACA,WAAWC;AAAA,MACX,SAASE;AAAA,MACT,cAAcE;AAAA,MACd,mBAAiBjB;AAAA,MAEjB,UAAA,gBAAAkB,EAAC,KAAA,EAAE,MAAK,YAAY,UAAAjB,EAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AAGtC;"}

package/components/menuItems/MenuItemList.js

@@ -1,6 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
 import { forwardRef as a } from "react";
-import i from "classnames";
+import i from "../../utils/classNames.js";
 const d = a((r, o) => {
   const { pullRight: s, className: e, children: m, ...n } = r, t = i("dropdown-menu", s && "pull-right", e);
   return /* @__PURE__ */ l("ul", { ...n, className: t, ref: o, role: "menu", children: m });

package/components/menuItems/MenuItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemList.js","sources":["../../../src/components/menuItems/MenuItemList.tsx"],"sourcesContent":["import { forwardRef, type PropsWithChildren, type HTMLProps } from 'react';\nimport classNames from 'classnames';\n\ntype MenuItemListProps = {\n    pullRight?: boolean;\n    className?: string;\n} & HTMLProps<HTMLUListElement>;\n\nconst MenuItemList = forwardRef<HTMLUListElement, PropsWithChildren<MenuItemListProps>>((props, ref) => {\n    const { pullRight, className, children, ...remainingProps } = props;\n\n    const dropdownMenuClasses = classNames('dropdown-menu', pullRight && 'pull-right', className);\n\n    return (\n        <ul {...remainingProps} className={dropdownMenuClasses} ref={ref} role='menu'>\n            {children}\n        </ul>\n    );\n});\n\nexport default MenuItemList;\n"],"names":["MenuItemList","forwardRef","props","ref","pullRight","className","children","remainingProps","dropdownMenuClasses","classNames","jsx"],"mappings":";;;AAQA,MAAMA,IAAeC,EAAmE,CAACC,GAAOC,MAAQ;AACpG,QAAM,EAAE,WAAAC,GAAW,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBL,GAExDM,IAAsBC,EAAW,iBAAiBL,KAAa,cAAcC,CAAS;AAE5F,SACI,gBAAAK,EAAC,QAAI,GAAGH,GAAgB,WAAWC,GAAqB,KAAAL,GAAU,MAAK,QAClE,UAAAG,EAAA,CACL;AAER,CAAC;"}
+{"version":3,"file":"MenuItemList.js","sources":["../../../src/components/menuItems/MenuItemList.tsx"],"sourcesContent":["import { forwardRef, type PropsWithChildren, type HTMLProps } from 'react';\n\nimport classNames from '../../utils/classNames';\n\ntype MenuItemListProps = {\n    pullRight?: boolean;\n    className?: string;\n} & HTMLProps<HTMLUListElement>;\n\nconst MenuItemList = forwardRef<HTMLUListElement, PropsWithChildren<MenuItemListProps>>((props, ref) => {\n    const { pullRight, className, children, ...remainingProps } = props;\n\n    const dropdownMenuClasses = classNames('dropdown-menu', pullRight && 'pull-right', className);\n\n    return (\n        <ul {...remainingProps} className={dropdownMenuClasses} ref={ref} role='menu'>\n            {children}\n        </ul>\n    );\n});\n\nexport default MenuItemList;\n"],"names":["MenuItemList","forwardRef","props","ref","pullRight","className","children","remainingProps","dropdownMenuClasses","classNames","jsx"],"mappings":";;;AASA,MAAMA,IAAeC,EAAmE,CAACC,GAAOC,MAAQ;AACpG,QAAM,EAAE,WAAAC,GAAW,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBL,GAExDM,IAAsBC,EAAW,iBAAiBL,KAAa,cAAcC,CAAS;AAE5F,SACI,gBAAAK,EAAC,QAAI,GAAGH,GAAgB,WAAWC,GAAqB,KAAAL,GAAU,MAAK,QAClE,UAAAG,EAAA,CACL;AAER,CAAC;"}

package/components/navigation/AppNavigationBar.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { forwardRef as x } from "react";
-import h from "classnames";
-import { noop as N } from "es-toolkit/function";
+import { noop as h } from "es-toolkit/function";
+import N from "../../utils/classNames.js";
 import f from "../button/Button.js";
 const B = x((s, o) => {
   const {
@@ -12,9 +12,9 @@ const B = x((s, o) => {
     titleSize: r = "md",
     subtitle: a,
     border: d = !1,
-    onNavigateBack: m = N,
+    onNavigateBack: m = h,
     ...p
-  } = s, g = h(
+  } = s, g = N(
     "AppNavigationBar",
     "width-100pct height-45 user-select-none padding-x-10",
     "display-grid grid-stack align-items-center",

package/components/navigation/AppNavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppNavigationBar.js","sources":["../../../src/components/navigation/AppNavigationBar.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef, type MouseEvent, type ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport Button from '../button/Button';\n\nexport type AppNavigationBarProps = {\n    /**\n     * The title for the content that is shown.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * Defines the size of the title. Possible values are 'md' and 'lg'.\n     *\n     * @default 'md'\n     */\n    titleSize?: 'md' | 'lg';\n\n    /**\n     * Adds a subtitle below the title.\n     */\n    subtitle?: string | ReactNode;\n\n    /**\n     * Right side area for additional options of buttons like filter etc. that is relevant for the shown content..\n     */\n    right?: ReactNode;\n\n    backButtonText?: string | ReactNode;\n\n    /**\n     * Add a light bottom border to the wrapper element.\n     *\n     * @default false\n     */\n    border?: boolean;\n\n    /**\n     * Callback function for when the back navigation button is clicked.\n     */\n    onNavigateBack?: (event: MouseEvent<HTMLSpanElement>) => void;\n\n    /**\n     * Additional classes for the wrapper element.\n     */\n    className?: string;\n};\n\nexport const AppNavigationBar = forwardRef((props: AppNavigationBarProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const {\n        className,\n        title,\n        right = <span />,\n        backButtonText = '',\n        titleSize = 'md',\n        subtitle,\n        border = false,\n        onNavigateBack = noop,\n        ...remainingProps\n    } = props;\n\n    const navigationClasses = classNames(\n        'AppNavigationBar',\n        'width-100pct height-45 user-select-none padding-x-10',\n        'display-grid grid-stack align-items-center',\n        titleSize === 'md' && 'text-size-14',\n        titleSize === 'lg' && 'text-size-16',\n        border && 'border border-bottom-only border-color-lighter',\n        className\n    );\n\n    return (\n        <div ref={ref} {...remainingProps} className={navigationClasses}>\n            <div className='grid-stack-item display-flex align-items-center justify-content-between'>\n                <Button\n                    bsStyle='muted'\n                    className='text-color-darkest'\n                    iconOnly={!backButtonText}\n                    iconName='rioglyph-arrow-left'\n                    onClick={onNavigateBack}\n                >\n                    {backButtonText}\n                </Button>\n                <div className='btn-toolbar gap-2'>{right}</div>\n            </div>\n            <div className='grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1'>\n                <div className='ellipsis-1'>{title}</div>\n                {subtitle && <div className='text-size-12 line-height-12 text-normal margin-top--2'>{subtitle}</div>}\n            </div>\n        </div>\n    );\n});\n\nexport default AppNavigationBar;\n"],"names":["AppNavigationBar","forwardRef","props","ref","className","title","right","backButtonText","titleSize","subtitle","border","onNavigateBack","noop","remainingProps","navigationClasses","classNames","jsxs","jsx","Button"],"mappings":";;;;;AAiDO,MAAMA,IAAmBC,EAAW,CAACC,GAA8BC,MAAsC;AAC5G,QAAM;AAAA,IACF,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC,sBAAS,QAAA,EAAK;AAAA,IACd,gBAAAC,IAAiB;AAAA,IACjB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,gBAAAC,IAAiBC;AAAA,IACjB,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAoBC;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACAP,MAAc,QAAQ;AAAA,IACtBA,MAAc,QAAQ;AAAA,IACtBE,KAAU;AAAA,IACVN;AAAA,EAAA;AAGJ,2BACK,OAAA,EAAI,KAAAD,GAAW,GAAGU,GAAgB,WAAWC,GAC1C,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,2EACX,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,UAAU,CAACX;AAAA,UACX,UAAS;AAAA,UACT,SAASI;AAAA,UAER,UAAAJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAEL,gBAAAU,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAX,EAAA,CAAM;AAAA,IAAA,GAC9C;AAAA,IACA,gBAAAU,EAAC,OAAA,EAAI,WAAU,gGACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,cAAc,UAAAZ,GAAM;AAAA,MAClCI,KAAY,gBAAAQ,EAAC,OAAA,EAAI,WAAU,yDAAyD,UAAAR,EAAA,CAAS;AAAA,IAAA,EAAA,CAClG;AAAA,EAAA,GACJ;AAER,CAAC;"}
+{"version":3,"file":"AppNavigationBar.js","sources":["../../../src/components/navigation/AppNavigationBar.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef, type MouseEvent, type ReactNode } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport Button from '../button/Button';\n\nexport type AppNavigationBarProps = {\n    /**\n     * The title for the content that is shown.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * Defines the size of the title. Possible values are 'md' and 'lg'.\n     *\n     * @default 'md'\n     */\n    titleSize?: 'md' | 'lg';\n\n    /**\n     * Adds a subtitle below the title.\n     */\n    subtitle?: string | ReactNode;\n\n    /**\n     * Right side area for additional options of buttons like filter etc. that is relevant for the shown content..\n     */\n    right?: ReactNode;\n\n    backButtonText?: string | ReactNode;\n\n    /**\n     * Add a light bottom border to the wrapper element.\n     *\n     * @default false\n     */\n    border?: boolean;\n\n    /**\n     * Callback function for when the back navigation button is clicked.\n     */\n    onNavigateBack?: (event: MouseEvent<HTMLSpanElement>) => void;\n\n    /**\n     * Additional classes for the wrapper element.\n     */\n    className?: string;\n};\n\nexport const AppNavigationBar = forwardRef((props: AppNavigationBarProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const {\n        className,\n        title,\n        right = <span />,\n        backButtonText = '',\n        titleSize = 'md',\n        subtitle,\n        border = false,\n        onNavigateBack = noop,\n        ...remainingProps\n    } = props;\n\n    const navigationClasses = classNames(\n        'AppNavigationBar',\n        'width-100pct height-45 user-select-none padding-x-10',\n        'display-grid grid-stack align-items-center',\n        titleSize === 'md' && 'text-size-14',\n        titleSize === 'lg' && 'text-size-16',\n        border && 'border border-bottom-only border-color-lighter',\n        className\n    );\n\n    return (\n        <div ref={ref} {...remainingProps} className={navigationClasses}>\n            <div className='grid-stack-item display-flex align-items-center justify-content-between'>\n                <Button\n                    bsStyle='muted'\n                    className='text-color-darkest'\n                    iconOnly={!backButtonText}\n                    iconName='rioglyph-arrow-left'\n                    onClick={onNavigateBack}\n                >\n                    {backButtonText}\n                </Button>\n                <div className='btn-toolbar gap-2'>{right}</div>\n            </div>\n            <div className='grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1'>\n                <div className='ellipsis-1'>{title}</div>\n                {subtitle && <div className='text-size-12 line-height-12 text-normal margin-top--2'>{subtitle}</div>}\n            </div>\n        </div>\n    );\n});\n\nexport default AppNavigationBar;\n"],"names":["AppNavigationBar","forwardRef","props","ref","className","title","right","backButtonText","titleSize","subtitle","border","onNavigateBack","noop","remainingProps","navigationClasses","classNames","jsxs","jsx","Button"],"mappings":";;;;;AAiDO,MAAMA,IAAmBC,EAAW,CAACC,GAA8BC,MAAsC;AAC5G,QAAM;AAAA,IACF,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC,sBAAS,QAAA,EAAK;AAAA,IACd,gBAAAC,IAAiB;AAAA,IACjB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,gBAAAC,IAAiBC;AAAA,IACjB,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAoBC;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACAP,MAAc,QAAQ;AAAA,IACtBA,MAAc,QAAQ;AAAA,IACtBE,KAAU;AAAA,IACVN;AAAA,EAAA;AAGJ,2BACK,OAAA,EAAI,KAAAD,GAAW,GAAGU,GAAgB,WAAWC,GAC1C,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,2EACX,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,UAAU,CAACX;AAAA,UACX,UAAS;AAAA,UACT,SAASI;AAAA,UAER,UAAAJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAEL,gBAAAU,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAX,EAAA,CAAM;AAAA,IAAA,GAC9C;AAAA,IACA,gBAAAU,EAAC,OAAA,EAAI,WAAU,gGACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,cAAc,UAAAZ,GAAM;AAAA,MAClCI,KAAY,gBAAAQ,EAAC,OAAA,EAAI,WAAU,yDAAyD,UAAAR,EAAA,CAAS;AAAA,IAAA,EAAA,CAClG;AAAA,EAAA,GACJ;AAER,CAAC;"}

package/components/noData/NoData.js

@@ -1,5 +1,5 @@
 import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import c from "classnames";
+import c from "../../utils/classNames.js";
 import m from "../tooltip/SimpleTooltip.js";
 import { PLACEMENT as N } from "../../values/Placement.js";
 const g = (a) => {

package/components/noData/NoData.js.map

@@ -1 +1 @@
-{"version":3,"file":"NoData.js","sources":["../../../src/components/noData/NoData.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\n\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\nimport type { TooltipWidth } from '../tooltip/Tooltip';\nimport { PLACEMENT } from '../../values/Placement';\nimport type { ObjectValues } from '../../utils/ObjectValues';\n\nexport type NoDataProps = {\n    /**\n     * The actual translated \"No data\" text.\n     */\n    text: string | React.ReactNode;\n\n    /**\n     * Additional explanation shown inside a tooltip.\n     */\n    tooltip?: string | React.ReactNode;\n\n    /**\n     * Sets the direction the Tooltip is positioned towards.\n     *\n     * Possible values are:\n     * `auto-start`, `auto`, `auto-end`,\n     * `top-start`, `top`, `top-end`,\n     * `bottom-start`, `bottom`, `bottom-end`,\n     * `right-start`, `right`, `right-end`,\n     * `left-start`, `left`, `left-end`\n     */\n    tooltipPlacement?: ObjectValues<typeof PLACEMENT>;\n\n    /**\n     * The width of the tooltip.\n     *\n     * Possible values are:\n     * `auto`, `100`, `150`, `200`, `250`, `300`, `350`, `400`, `450`, `500`\n     */\n    tooltipWidth?: TooltipWidth;\n\n    /**\n     * Additional class names to be added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst NoData = (props: NoDataProps) => {\n    const {\n        text,\n        className = '',\n        tooltip,\n        tooltipPlacement = PLACEMENT.BOTTOM,\n        tooltipWidth = 'auto',\n        ...remainingProps\n    } = props;\n\n    const noDataClasses = classNames('NoData', className);\n\n    if (tooltip) {\n        return (\n            <span {...remainingProps} className={noDataClasses}>\n                <span className='pointer-events-none user-select-none'>{text}</span>\n                <SimpleTooltip content={tooltip} placement={tooltipPlacement} width={tooltipWidth}>\n                    <span className='rioglyph rioglyph-info-sign margin-left-5' />\n                </SimpleTooltip>\n            </span>\n        );\n    }\n\n    return (\n        <span {...remainingProps} className={noDataClasses}>\n            <span className='pointer-events-none user-select-none'>{text}</span>\n        </span>\n    );\n};\n\nexport default NoData;\n"],"names":["NoData","props","text","className","tooltip","tooltipPlacement","PLACEMENT","tooltipWidth","remainingProps","noDataClasses","classNames","jsxs","jsx","SimpleTooltip"],"mappings":";;;;AA6CA,MAAMA,IAAS,CAACC,MAAuB;AACnC,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,SAAAC;AAAA,IACA,kBAAAC,IAAmBC,EAAU;AAAA,IAC7B,cAAAC,IAAe;AAAA,IACf,GAAGC;AAAA,EAAA,IACHP,GAEEQ,IAAgBC,EAAW,UAAUP,CAAS;AAEpD,SAAIC,IAEI,gBAAAO,EAAC,QAAA,EAAM,GAAGH,GAAgB,WAAWC,GACjC,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,wCAAwC,UAAAV,GAAK;AAAA,IAC7D,gBAAAU,EAACC,GAAA,EAAc,SAAST,GAAS,WAAWC,GAAkB,OAAOE,GACjE,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAU,4CAAA,CAA4C,EAAA,CAChE;AAAA,EAAA,GACJ,IAKJ,gBAAAA,EAAC,QAAA,EAAM,GAAGJ,GAAgB,WAAWC,GACjC,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,wCAAwC,UAAAV,EAAA,CAAK,GACjE;AAER;"}
+{"version":3,"file":"NoData.js","sources":["../../../src/components/noData/NoData.tsx"],"sourcesContent":["import type React from 'react';\n\nimport classNames from '../../utils/classNames';\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\nimport type { TooltipWidth } from '../tooltip/Tooltip';\nimport { PLACEMENT } from '../../values/Placement';\nimport type { ObjectValues } from '../../utils/ObjectValues';\n\nexport type NoDataProps = {\n    /**\n     * The actual translated \"No data\" text.\n     */\n    text: string | React.ReactNode;\n\n    /**\n     * Additional explanation shown inside a tooltip.\n     */\n    tooltip?: string | React.ReactNode;\n\n    /**\n     * Sets the direction the Tooltip is positioned towards.\n     *\n     * Possible values are:\n     * `auto-start`, `auto`, `auto-end`,\n     * `top-start`, `top`, `top-end`,\n     * `bottom-start`, `bottom`, `bottom-end`,\n     * `right-start`, `right`, `right-end`,\n     * `left-start`, `left`, `left-end`\n     */\n    tooltipPlacement?: ObjectValues<typeof PLACEMENT>;\n\n    /**\n     * The width of the tooltip.\n     *\n     * Possible values are:\n     * `auto`, `100`, `150`, `200`, `250`, `300`, `350`, `400`, `450`, `500`\n     */\n    tooltipWidth?: TooltipWidth;\n\n    /**\n     * Additional class names to be added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst NoData = (props: NoDataProps) => {\n    const {\n        text,\n        className = '',\n        tooltip,\n        tooltipPlacement = PLACEMENT.BOTTOM,\n        tooltipWidth = 'auto',\n        ...remainingProps\n    } = props;\n\n    const noDataClasses = classNames('NoData', className);\n\n    if (tooltip) {\n        return (\n            <span {...remainingProps} className={noDataClasses}>\n                <span className='pointer-events-none user-select-none'>{text}</span>\n                <SimpleTooltip content={tooltip} placement={tooltipPlacement} width={tooltipWidth}>\n                    <span className='rioglyph rioglyph-info-sign margin-left-5' />\n                </SimpleTooltip>\n            </span>\n        );\n    }\n\n    return (\n        <span {...remainingProps} className={noDataClasses}>\n            <span className='pointer-events-none user-select-none'>{text}</span>\n        </span>\n    );\n};\n\nexport default NoData;\n"],"names":["NoData","props","text","className","tooltip","tooltipPlacement","PLACEMENT","tooltipWidth","remainingProps","noDataClasses","classNames","jsxs","jsx","SimpleTooltip"],"mappings":";;;;AA6CA,MAAMA,IAAS,CAACC,MAAuB;AACnC,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,SAAAC;AAAA,IACA,kBAAAC,IAAmBC,EAAU;AAAA,IAC7B,cAAAC,IAAe;AAAA,IACf,GAAGC;AAAA,EAAA,IACHP,GAEEQ,IAAgBC,EAAW,UAAUP,CAAS;AAEpD,SAAIC,IAEI,gBAAAO,EAAC,QAAA,EAAM,GAAGH,GAAgB,WAAWC,GACjC,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,wCAAwC,UAAAV,GAAK;AAAA,IAC7D,gBAAAU,EAACC,GAAA,EAAc,SAAST,GAAS,WAAWC,GAAkB,OAAOE,GACjE,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAU,4CAAA,CAA4C,EAAA,CAChE;AAAA,EAAA,GACJ,IAKJ,gBAAAA,EAAC,QAAA,EAAM,GAAGJ,GAAgB,WAAWC,GACjC,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,wCAAwC,UAAAV,EAAA,CAAK,GACjE;AAER;"}

package/components/notification/Notification.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as C } from "react/jsx-runtime";
 import { toast as h, Slide as O } from "react-toastify";
-const b = 5e3, B = 999999, k = {
+const b = 5e3, y = 999999, k = {
   position: "top-right",
   hideProgressBar: !0,
   pauseOnHover: !0,
@@ -34,7 +34,7 @@ const b = 5e3, B = 999999, k = {
     // as otherwise it will be passed onto the underlying DOM element
     closeButton: r ? ({ closeToast: s }) => /* @__PURE__ */ e("button", { className: "notification-close", type: "button", children: /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-remove" }) }) : !1
   };
-}, _ = /* @__PURE__ */ (() => {
+}, B = /* @__PURE__ */ (() => {
   const t = (o, s, I) => {
     const { title: l, timeout: u, callback: m, closeButton: f, closeOnClick: g, hideProgressBar: d } = I ?? {}, N = {
       default: "",
@@ -75,7 +75,7 @@ const b = 5e3, B = 999999, k = {
 })();
 export {
   b as DEFAULT_NOTIFICATION_TIMEOUT_IN_MS,
-  B as NOTIFICATION_TIMEOUT_INFINITE,
-  _ as default
+  y as NOTIFICATION_TIMEOUT_INFINITE,
+  B as default
 };
 //# sourceMappingURL=Notification.js.map

package/components/notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../src/components/notification/Notification.tsx"],"sourcesContent":["import type React from 'react';\nimport { toast, Slide, type ToastOptions } from 'react-toastify';\n\nexport const DEFAULT_NOTIFICATION_TIMEOUT_IN_MS = 5_000;\nexport const NOTIFICATION_TIMEOUT_INFINITE = 999_999;\n\nconst baseOptions: ToastOptions = {\n    position: 'top-right',\n    hideProgressBar: true,\n    pauseOnHover: true,\n    draggable: true,\n    theme: 'colored',\n    transition: Slide,\n};\n\nexport type NotificationOptions = {\n    /**\n     * The title to be shown.\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * The timeout in milliseconds after which the notification disappears.\n     *\n     * If you don`t want it to automatically disappear, set a very high number.\n     */\n    timeout?: number;\n\n    /**\n     * A function that gets invoked when the notification is clicked.\n     */\n    callback?: VoidFunction;\n\n    /**\n     * Flag to enable a close button.\n     *\n     * @default false\n     */\n    closeButton?: boolean;\n\n    /**\n     * Flag to disable close on clicking on the notification.\n     *\n     * @default true\n     */\n    closeOnClick?: boolean;\n\n    /**\n     * Flag to show a progress bar. By default it is not shown.\n     *\n     * @default true\n     */\n    hideProgressBar?: boolean;\n};\n\n/**\n * Internal\n */\ntype MapOptionsProps = {\n    timeout?: number;\n    callback?: VoidFunction;\n    priority?: boolean;\n    iconClassName: string;\n    closeButton?: boolean | React.ReactElement | ((props: any) => React.ReactElement);\n    closeOnClick?: boolean;\n    hideProgressBar?: boolean;\n};\n\n/**\n * Internal\n */\ntype ToastMessageProps = {\n    message: string | React.ReactNode;\n    title?: string | React.ReactNode;\n};\n\nconst ToastMessage = (props: ToastMessageProps) => {\n    const { title, message } = props;\n\n    return (\n        <div className='notification'>\n            <div className='notification-message' role='alert'>\n                {title && <h4 className='title'>{title}</h4>}\n                <div className='message'>{message}</div>\n            </div>\n        </div>\n    );\n};\n\nconst mapOptions = (options: MapOptionsProps): ToastOptions => {\n    const {\n        timeout,\n        callback,\n        iconClassName,\n        closeButton = false,\n        hideProgressBar = true,\n        closeOnClick = true,\n    } = options;\n\n    return {\n        ...baseOptions,\n        autoClose: timeout || DEFAULT_NOTIFICATION_TIMEOUT_IN_MS,\n        onClick: callback,\n        hideProgressBar,\n        closeOnClick,\n        // replace the default built-in icons\n        icon: <span className={`rioglyph ${iconClassName}`} />,\n        // in case a close button is requested, ignore the auto-injected \"closeToast\" prop\n        // as otherwise it will be passed onto the underlying DOM element\n        closeButton: closeButton\n            ? ({ closeToast: ignoreCloseToast }) => (\n                  <button className='notification-close' type='button'>\n                      <span className='rioglyph rioglyph-remove' />\n                  </button>\n              )\n            : false,\n    };\n};\n\nconst Notification = (() => {\n    const notify = (\n        type: 'default' | 'info' | 'success' | 'warn' | 'error',\n        message: string | React.ReactNode,\n        options?: NotificationOptions\n    ) => {\n        const { title, timeout: time, callback: cb, closeButton, closeOnClick, hideProgressBar } = options ?? {};\n\n        // Map icon class names based on type\n        const iconClassNames: Record<typeof type, string> = {\n            default: '',\n            success: 'rioglyph-ok text-size-18',\n            info: 'rioglyph-info-sign text-size-20',\n            warn: 'rioglyph-exclamation-sign text-size-20',\n            error: 'rioglyph-error-sign text-size-20',\n        };\n\n        if (type === 'default') {\n            return toast(\n                <ToastMessage message={message} title={title} />,\n                mapOptions({\n                    timeout: time,\n                    callback: cb,\n                    closeButton,\n                    closeOnClick,\n                    hideProgressBar,\n                    iconClassName: iconClassNames[type],\n                })\n            );\n        }\n\n        // Call the appropriate toast function\n        return toast[type](\n            <ToastMessage message={message} title={title} />,\n            mapOptions({\n                timeout: time,\n                callback: cb,\n                closeButton,\n                closeOnClick,\n                hideProgressBar,\n                iconClassName: iconClassNames[type],\n            })\n        );\n    };\n\n    // Wrappers for specific types\n    const defaultNotification = (message: string | React.ReactNode, options?: NotificationOptions) =>\n        notify('default', message, options);\n\n    const info = (message: string | React.ReactNode, options?: NotificationOptions) => notify('info', message, options);\n\n    const success = (message: string | React.ReactNode, options?: NotificationOptions) =>\n        notify('success', message, options);\n\n    const warning = (message: string | React.ReactNode, options?: NotificationOptions) =>\n        notify('warn', message, options);\n\n    const error = (message: string | React.ReactNode, options?: NotificationOptions) =>\n        notify('error', message, options);\n\n    return {\n        default: defaultNotification,\n        success,\n        info,\n        warning,\n        error,\n    };\n})();\n\nexport default Notification;\n"],"names":["DEFAULT_NOTIFICATION_TIMEOUT_IN_MS","NOTIFICATION_TIMEOUT_INFINITE","baseOptions","Slide","ToastMessage","props","title","message","jsx","mapOptions","options","timeout","callback","iconClassName","closeButton","hideProgressBar","closeOnClick","ignoreCloseToast","Notification","notify","type","time","cb","iconClassNames","toast"],"mappings":";;AAGO,MAAMA,IAAqC,KACrCC,IAAgC,QAEvCC,IAA4B;AAAA,EAC9B,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAYC;AAChB,GA+DMC,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,OAAAC,GAAO,SAAAC,EAAA,IAAYF;AAE3B,SACI,gBAAAG,EAAC,SAAI,WAAU,gBACX,4BAAC,OAAA,EAAI,WAAU,wBAAuB,MAAK,SACtC,UAAA;AAAA,IAAAF,KAAS,gBAAAE,EAAC,MAAA,EAAG,WAAU,SAAS,UAAAF,GAAM;AAAA,IACvC,gBAAAE,EAAC,OAAA,EAAI,WAAU,WAAW,UAAAD,EAAA,CAAQ;AAAA,EAAA,EAAA,CACtC,EAAA,CACJ;AAER,GAEME,IAAa,CAACC,MAA2C;AAC3D,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,iBAAAC,IAAkB;AAAA,IAClB,cAAAC,IAAe;AAAA,EAAA,IACfN;AAEJ,SAAO;AAAA,IACH,GAAGR;AAAA,IACH,WAAWS,KAAWX;AAAA,IACtB,SAASY;AAAA,IACT,iBAAAG;AAAA,IACA,cAAAC;AAAA;AAAA,IAEA,MAAM,gBAAAR,EAAC,QAAA,EAAK,WAAW,YAAYK,CAAa,IAAI;AAAA;AAAA;AAAA,IAGpD,aAAaC,IACP,CAAC,EAAE,YAAYG,EAAA,MACX,gBAAAT,EAAC,UAAA,EAAO,WAAU,sBAAqB,MAAK,UACxC,UAAA,gBAAAA,EAAC,UAAK,WAAU,4BAA2B,GAC/C,IAEJ;AAAA,EAAA;AAEd,GAEMU,IAAgB,uBAAM;AACxB,QAAMC,IAAS,CACXC,GACAb,GACAG,MACC;AACD,UAAM,EAAE,OAAAJ,GAAO,SAASe,GAAM,UAAUC,GAAI,aAAAR,GAAa,cAAAE,GAAc,iBAAAD,EAAA,IAAoBL,KAAW,CAAA,GAGhGa,IAA8C;AAAA,MAChD,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAGX,WAAIH,MAAS,YACFI;AAAA,MACH,gBAAAhB,EAACJ,GAAA,EAAa,SAAAG,GAAkB,OAAAD,EAAA,CAAc;AAAA,MAC9CG,EAAW;AAAA,QACP,SAASY;AAAA,QACT,UAAUC;AAAA,QACV,aAAAR;AAAA,QACA,cAAAE;AAAA,QACA,iBAAAD;AAAA,QACA,eAAeQ,EAAeH,CAAI;AAAA,MAAA,CACrC;AAAA,IAAA,IAKFI,EAAMJ,CAAI;AAAA,MACb,gBAAAZ,EAACJ,GAAA,EAAa,SAAAG,GAAkB,OAAAD,EAAA,CAAc;AAAA,MAC9CG,EAAW;AAAA,QACP,SAASY;AAAA,QACT,UAAUC;AAAA,QACV,aAAAR;AAAA,QACA,cAAAE;AAAA,QACA,iBAAAD;AAAA,QACA,eAAeQ,EAAeH,CAAI;AAAA,MAAA,CACrC;AAAA,IAAA;AAAA,EAET;AAiBA,SAAO;AAAA,IACH,SAfwB,CAACb,GAAmCG,MAC5DS,EAAO,WAAWZ,GAASG,CAAO;AAAA,IAelC,SAXY,CAACH,GAAmCG,MAChDS,EAAO,WAAWZ,GAASG,CAAO;AAAA,IAWlC,MAdS,CAACH,GAAmCG,MAAkCS,EAAO,QAAQZ,GAASG,CAAO;AAAA,IAe9G,SAVY,CAACH,GAAmCG,MAChDS,EAAO,QAAQZ,GAASG,CAAO;AAAA,IAU/B,OARU,CAACH,GAAmCG,MAC9CS,EAAO,SAASZ,GAASG,CAAO;AAAA,EAOhC;AAER,GAAA;"}
+{"version":3,"file":"Notification.js","sources":["../../../src/components/notification/Notification.tsx"],"sourcesContent":["import type React from 'react';\nimport { toast, Slide, type ToastOptions } from 'react-toastify';\n\nexport const DEFAULT_NOTIFICATION_TIMEOUT_IN_MS = 5_000;\nexport const NOTIFICATION_TIMEOUT_INFINITE = 999_999;\n\nconst baseOptions: ToastOptions = {\n    position: 'top-right',\n    hideProgressBar: true,\n    pauseOnHover: true,\n    draggable: true,\n    theme: 'colored',\n    transition: Slide,\n};\n\nexport type NotificationOptions = {\n    /**\n     * The title to be shown.\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * The timeout in milliseconds after which the notification disappears.\n     *\n     * If you don`t want it to automatically disappear, set a very high number.\n     */\n    timeout?: number;\n\n    /**\n     * A function that gets invoked when the notification is clicked.\n     */\n    callback?: VoidFunction;\n\n    /**\n     * Flag to enable a close button.\n     *\n     * @default false\n     */\n    closeButton?: boolean;\n\n    /**\n     * Flag to disable close on clicking on the notification.\n     *\n     * @default true\n     */\n    closeOnClick?: boolean;\n\n    /**\n     * Flag to show a progress bar. By default it is not shown.\n     *\n     * @default true\n     */\n    hideProgressBar?: boolean;\n};\n\n/**\n * Internal\n */\ntype MapOptionsProps = {\n    timeout?: number;\n    callback?: VoidFunction;\n    priority?: boolean;\n    iconClassName: string;\n    closeButton?: boolean | React.ReactElement | ((props: any) => React.ReactElement);\n    closeOnClick?: boolean;\n    hideProgressBar?: boolean;\n};\n\n/**\n * Internal\n */\ntype ToastMessageProps = {\n    message: string | React.ReactNode;\n    title?: string | React.ReactNode;\n};\n\nconst ToastMessage = (props: ToastMessageProps) => {\n    const { title, message } = props;\n\n    return (\n        <div className='notification'>\n            <div className='notification-message' role='alert'>\n                {title && <h4 className='title'>{title}</h4>}\n                <div className='message'>{message}</div>\n            </div>\n        </div>\n    );\n};\n\nconst mapOptions = (options: MapOptionsProps): ToastOptions => {\n    const {\n        timeout,\n        callback,\n        iconClassName,\n        closeButton = false,\n        hideProgressBar = true,\n        closeOnClick = true,\n    } = options;\n\n    return {\n        ...baseOptions,\n        autoClose: timeout || DEFAULT_NOTIFICATION_TIMEOUT_IN_MS,\n        onClick: callback,\n        hideProgressBar,\n        closeOnClick,\n        // replace the default built-in icons\n        icon: <span className={`rioglyph ${iconClassName}`} />,\n        // in case a close button is requested, ignore the auto-injected \"closeToast\" prop\n        // as otherwise it will be passed onto the underlying DOM element\n        closeButton: closeButton\n            ? ({ closeToast: _ignoreCloseToast }) => (\n                  <button className='notification-close' type='button'>\n                      <span className='rioglyph rioglyph-remove' />\n                  </button>\n              )\n            : false,\n    };\n};\n\nconst Notification = (() => {\n    const notify = (\n        type: 'default' | 'info' | 'success' | 'warn' | 'error',\n        message: string | React.ReactNode,\n        options?: NotificationOptions\n    ) => {\n        const { title, timeout: time, callback: cb, closeButton, closeOnClick, hideProgressBar } = options ?? {};\n\n        // Map icon class names based on type\n        const iconClassNames: Record<typeof type, string> = {\n            default: '',\n            success: 'rioglyph-ok text-size-18',\n            info: 'rioglyph-info-sign text-size-20',\n            warn: 'rioglyph-exclamation-sign text-size-20',\n            error: 'rioglyph-error-sign text-size-20',\n        };\n\n        if (type === 'default') {\n            return toast(\n                <ToastMessage message={message} title={title} />,\n                mapOptions({\n                    timeout: time,\n                    callback: cb,\n                    closeButton,\n                    closeOnClick,\n                    hideProgressBar,\n                    iconClassName: iconClassNames[type],\n                })\n            );\n        }\n\n        // Call the appropriate toast function\n        return toast[type](\n            <ToastMessage message={message} title={title} />,\n            mapOptions({\n                timeout: time,\n                callback: cb,\n                closeButton,\n                closeOnClick,\n                hideProgressBar,\n                iconClassName: iconClassNames[type],\n            })\n        );\n    };\n\n    // Wrappers for specific types\n    const defaultNotification = (message: string | React.ReactNode, options?: NotificationOptions) =>\n        notify('default', message, options);\n\n    const info = (message: string | React.ReactNode, options?: NotificationOptions) => notify('info', message, options);\n\n    const success = (message: string | React.ReactNode, options?: NotificationOptions) =>\n        notify('success', message, options);\n\n    const warning = (message: string | React.ReactNode, options?: NotificationOptions) =>\n        notify('warn', message, options);\n\n    const error = (message: string | React.ReactNode, options?: NotificationOptions) =>\n        notify('error', message, options);\n\n    return {\n        default: defaultNotification,\n        success,\n        info,\n        warning,\n        error,\n    };\n})();\n\nexport default Notification;\n"],"names":["DEFAULT_NOTIFICATION_TIMEOUT_IN_MS","NOTIFICATION_TIMEOUT_INFINITE","baseOptions","Slide","ToastMessage","props","title","message","jsx","mapOptions","options","timeout","callback","iconClassName","closeButton","hideProgressBar","closeOnClick","_ignoreCloseToast","Notification","notify","type","time","cb","iconClassNames","toast"],"mappings":";;AAGO,MAAMA,IAAqC,KACrCC,IAAgC,QAEvCC,IAA4B;AAAA,EAC9B,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAYC;AAChB,GA+DMC,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,OAAAC,GAAO,SAAAC,EAAA,IAAYF;AAE3B,SACI,gBAAAG,EAAC,SAAI,WAAU,gBACX,4BAAC,OAAA,EAAI,WAAU,wBAAuB,MAAK,SACtC,UAAA;AAAA,IAAAF,KAAS,gBAAAE,EAAC,MAAA,EAAG,WAAU,SAAS,UAAAF,GAAM;AAAA,IACvC,gBAAAE,EAAC,OAAA,EAAI,WAAU,WAAW,UAAAD,EAAA,CAAQ;AAAA,EAAA,EAAA,CACtC,EAAA,CACJ;AAER,GAEME,IAAa,CAACC,MAA2C;AAC3D,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,iBAAAC,IAAkB;AAAA,IAClB,cAAAC,IAAe;AAAA,EAAA,IACfN;AAEJ,SAAO;AAAA,IACH,GAAGR;AAAA,IACH,WAAWS,KAAWX;AAAA,IACtB,SAASY;AAAA,IACT,iBAAAG;AAAA,IACA,cAAAC;AAAA;AAAA,IAEA,MAAM,gBAAAR,EAAC,QAAA,EAAK,WAAW,YAAYK,CAAa,IAAI;AAAA;AAAA;AAAA,IAGpD,aAAaC,IACP,CAAC,EAAE,YAAYG,EAAA,MACX,gBAAAT,EAAC,UAAA,EAAO,WAAU,sBAAqB,MAAK,UACxC,UAAA,gBAAAA,EAAC,UAAK,WAAU,4BAA2B,GAC/C,IAEJ;AAAA,EAAA;AAEd,GAEMU,IAAgB,uBAAM;AACxB,QAAMC,IAAS,CACXC,GACAb,GACAG,MACC;AACD,UAAM,EAAE,OAAAJ,GAAO,SAASe,GAAM,UAAUC,GAAI,aAAAR,GAAa,cAAAE,GAAc,iBAAAD,EAAA,IAAoBL,KAAW,CAAA,GAGhGa,IAA8C;AAAA,MAChD,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAGX,WAAIH,MAAS,YACFI;AAAA,MACH,gBAAAhB,EAACJ,GAAA,EAAa,SAAAG,GAAkB,OAAAD,EAAA,CAAc;AAAA,MAC9CG,EAAW;AAAA,QACP,SAASY;AAAA,QACT,UAAUC;AAAA,QACV,aAAAR;AAAA,QACA,cAAAE;AAAA,QACA,iBAAAD;AAAA,QACA,eAAeQ,EAAeH,CAAI;AAAA,MAAA,CACrC;AAAA,IAAA,IAKFI,EAAMJ,CAAI;AAAA,MACb,gBAAAZ,EAACJ,GAAA,EAAa,SAAAG,GAAkB,OAAAD,EAAA,CAAc;AAAA,MAC9CG,EAAW;AAAA,QACP,SAASY;AAAA,QACT,UAAUC;AAAA,QACV,aAAAR;AAAA,QACA,cAAAE;AAAA,QACA,iBAAAD;AAAA,QACA,eAAeQ,EAAeH,CAAI;AAAA,MAAA,CACrC;AAAA,IAAA;AAAA,EAET;AAiBA,SAAO;AAAA,IACH,SAfwB,CAACb,GAAmCG,MAC5DS,EAAO,WAAWZ,GAASG,CAAO;AAAA,IAelC,SAXY,CAACH,GAAmCG,MAChDS,EAAO,WAAWZ,GAASG,CAAO;AAAA,IAWlC,MAdS,CAACH,GAAmCG,MAAkCS,EAAO,QAAQZ,GAASG,CAAO;AAAA,IAe9G,SAVY,CAACH,GAAmCG,MAChDS,EAAO,QAAQZ,GAASG,CAAO;AAAA,IAU/B,OARU,CAACH,GAAmCG,MAC9CS,EAAO,SAASZ,GAASG,CAAO;AAAA,EAOhC;AAER,GAAA;"}

package/components/numberControl/NumberControl.js

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as q } from "react/jsx-runtime";
 import { forwardRef as J, useRef as Q, useState as g, useEffect as I } from "react";
-import Y from "classnames";
-import { noop as Z } from "es-toolkit/function";
+import { noop as Y } from "es-toolkit/function";
+import Z from "../../utils/classNames.js";
 import $, { DEFAULT_MIN as ee, DEFAULT_MAX as ne, DEFAULT_STEP as te, convertNonIntegerToDefault as V, DEFAULT_VALUE as L } from "../numberInput/NumberInput.js";
 const oe = 700, re = 50, se = 3, de = J((E, A) => {
   const {
@@ -11,7 +11,7 @@ const oe = 700, re = 50, se = 3, de = J((E, A) => {
     step: a = te,
     value: o,
     onChange: u,
-    onKeyDown: _ = Z,
+    onKeyDown: _ = Y,
     disabled: r,
     bsSize: C,
     className: F,
@@ -62,7 +62,7 @@ const oe = 700, re = 50, se = 3, de = J((E, A) => {
     n.current !== null && clearTimeout(n.current), h(!1), T(!1);
   }, G = (e) => {
     e !== void 0 && !(f && d) && l(Number(e)), u?.(e);
-  }, W = Y("NumberControl", F);
+  }, W = Z("NumberControl", F);
   return /* @__PURE__ */ t("div", { ...j, className: W, children: /* @__PURE__ */ t(
     $,
     {

package/components/numberControl/NumberControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberControl.js","sources":["../../../src/components/numberControl/NumberControl.tsx"],"sourcesContent":["import { useState, useRef, useEffect, forwardRef, type ForwardedRef } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport NumberInput, {\n    DEFAULT_STEP,\n    DEFAULT_MIN,\n    DEFAULT_MAX,\n    DEFAULT_VALUE,\n    convertNonIntegerToDefault,\n    type NumberInputProps,\n} from '../numberInput/NumberInput';\n\nconst INITIAL_TICK = 700;\nconst TICK_TIME = 50;\n\nconst DEFAULT_DIGIT_PRECISION = 3;\n\nexport type NumberControlProps = NumberInputProps;\n\nconst NumberControl = forwardRef((props: NumberControlProps, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        id,\n        min = DEFAULT_MIN,\n        max = DEFAULT_MAX,\n        step = DEFAULT_STEP,\n        value,\n        onChange,\n        onKeyDown = noop,\n        disabled,\n        bsSize,\n        className,\n        unit,\n        inputAddon,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace,\n        digitPrecision = DEFAULT_DIGIT_PRECISION,\n        placeholder,\n        noDefault,\n        ...remainingProps\n    } = props;\n\n    const timeout = useRef<NodeJS.Timeout | null>(null);\n\n    const [isHoldingDownInc, setIsHoldingDownInc] = useState(false);\n    const [isHoldingDownDec, setIsHoldingDownDec] = useState(false);\n    const [internalValue, setInternalValue] = useState(value);\n\n    const initialTimeout = (callbackFn: VoidFunction) => {\n        if (timeout.current !== null) {\n            clearTimeout(timeout.current);\n        }\n        timeout.current = setTimeout(() => {\n            callbackFn();\n        }, INITIAL_TICK);\n    };\n\n    const recursiveTimeout = (callbackFn: VoidFunction) => {\n        timeout.current = setTimeout(() => {\n            callbackFn();\n        }, TICK_TIME);\n    };\n\n    // Update internal state if external value has changed\n    useEffect(() => {\n        if (internalValue !== value) {\n            setInternalValue(value);\n        }\n    }, [value]);\n\n    // Notify external component if internal value has changed\n    useEffect(() => {\n        if (internalValue !== value && onChange) {\n            onChange(internalValue);\n        }\n    }, [internalValue]);\n\n    useEffect(() => {\n        // Call increment function for a loop when button is holding down\n        if (isHoldingDownInc && !disabled) {\n            initialTimeout(incrementRecursively);\n        }\n\n        // Call decrement function for a loop when button is holding down\n        if (isHoldingDownDec && !disabled) {\n            initialTimeout(decrementRecursively);\n        }\n    }, [isHoldingDownInc, isHoldingDownDec]);\n\n    const incrementInternalValue = () => {\n        setInternalValue(val => {\n            const currentValue = convertNonIntegerToDefault(val, DEFAULT_VALUE);\n            const newValue = Number((currentValue + step).toFixed(digitPrecision));\n            const newValueLimited = newValue <= max ? newValue : val;\n            return newValueLimited;\n        });\n    };\n\n    const decrementInternalValue = () => {\n        setInternalValue(val => {\n            const currentValue = convertNonIntegerToDefault(val, DEFAULT_VALUE);\n            const newValue = Number((currentValue - step).toFixed(digitPrecision));\n            const newValueLimited = newValue >= min ? newValue : val;\n            return newValueLimited;\n        });\n    };\n\n    const incrementRecursively = () => {\n        incrementInternalValue();\n        recursiveTimeout(incrementRecursively);\n    };\n\n    const decrementRecursively = () => {\n        decrementInternalValue();\n        recursiveTimeout(decrementRecursively);\n    };\n\n    const handleMouseDownOnIncrement = () => {\n        if (disabled) {\n            return;\n        }\n        setIsHoldingDownInc(true);\n\n        // increment for first click\n        incrementInternalValue();\n    };\n\n    const handleMouseDownOnDecrement = () => {\n        if (disabled) {\n            return;\n        }\n        setIsHoldingDownDec(true);\n\n        // decrement for first click\n        decrementInternalValue();\n    };\n\n    const handleStopHolding = () => {\n        if (timeout.current !== null) {\n            clearTimeout(timeout.current);\n        }\n        setIsHoldingDownInc(false);\n        setIsHoldingDownDec(false);\n    };\n\n    const handleUpdatedNumberInputValue = (newValue: number | undefined) => {\n        // Set the internal value when the value of the actual input has changed,\n        // for instance the user has typed in a number manually and to\n        // use this number as base to increase or decrease from.\n        // Ignore empty value in case the user has removed it\n        if (newValue !== undefined && !(isHoldingDownDec && isHoldingDownInc)) {\n            setInternalValue(Number(newValue));\n        }\n        onChange?.(newValue);\n    };\n\n    const classes = classNames('NumberControl', className);\n\n    const controls = (\n        <div className='display-flex padding-left-10' onMouseOut={handleStopHolding} onBlur={handleStopHolding}>\n            <div\n                onMouseDown={handleMouseDownOnDecrement}\n                onMouseUp={handleStopHolding}\n                role='button'\n                aria-label='decrement-button'\n                className='decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer'\n            >\n                <div className='rioglyph rioglyph-minus scale-90' />\n            </div>\n            <div\n                onMouseDown={handleMouseDownOnIncrement}\n                onMouseUp={handleStopHolding}\n                role='button'\n                aria-label='increment-button'\n                className='incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5'\n            >\n                <div className='rioglyph rioglyph-plus scale-90' />\n            </div>\n        </div>\n    );\n\n    return (\n        <div {...remainingProps} className={classes}>\n            <NumberInput\n                id={id}\n                ref={ref}\n                min={min}\n                max={max}\n                value={internalValue}\n                step={step}\n                bsSize={bsSize}\n                disabled={disabled}\n                inputAddon={inputAddon}\n                errorMessage={errorMessage}\n                warningMessage={warningMessage}\n                messageWhiteSpace={messageWhiteSpace}\n                controls={controls}\n                unit={unit}\n                onChange={handleUpdatedNumberInputValue}\n                onKeyDown={onKeyDown}\n                digitPrecision={digitPrecision}\n                placeholder={placeholder}\n                noDefault={noDefault}\n            />\n        </div>\n    );\n});\n\nexport default NumberControl;\n"],"names":["INITIAL_TICK","TICK_TIME","DEFAULT_DIGIT_PRECISION","NumberControl","forwardRef","props","ref","id","min","DEFAULT_MIN","max","DEFAULT_MAX","step","DEFAULT_STEP","value","onChange","onKeyDown","noop","disabled","bsSize","className","unit","inputAddon","errorMessage","warningMessage","messageWhiteSpace","digitPrecision","placeholder","noDefault","remainingProps","timeout","useRef","isHoldingDownInc","setIsHoldingDownInc","useState","isHoldingDownDec","setIsHoldingDownDec","internalValue","setInternalValue","initialTimeout","callbackFn","recursiveTimeout","useEffect","incrementRecursively","decrementRecursively","incrementInternalValue","val","currentValue","convertNonIntegerToDefault","DEFAULT_VALUE","newValue","decrementInternalValue","handleMouseDownOnIncrement","handleMouseDownOnDecrement","handleStopHolding","handleUpdatedNumberInputValue","classes","classNames","jsx","NumberInput"],"mappings":"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"}
+{"version":3,"file":"NumberControl.js","sources":["../../../src/components/numberControl/NumberControl.tsx"],"sourcesContent":["import { useState, useRef, useEffect, forwardRef, type ForwardedRef } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport NumberInput, {\n    DEFAULT_STEP,\n    DEFAULT_MIN,\n    DEFAULT_MAX,\n    DEFAULT_VALUE,\n    convertNonIntegerToDefault,\n    type NumberInputProps,\n} from '../numberInput/NumberInput';\n\nconst INITIAL_TICK = 700;\nconst TICK_TIME = 50;\n\nconst DEFAULT_DIGIT_PRECISION = 3;\n\nexport type NumberControlProps = NumberInputProps;\n\nconst NumberControl = forwardRef((props: NumberControlProps, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        id,\n        min = DEFAULT_MIN,\n        max = DEFAULT_MAX,\n        step = DEFAULT_STEP,\n        value,\n        onChange,\n        onKeyDown = noop,\n        disabled,\n        bsSize,\n        className,\n        unit,\n        inputAddon,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace,\n        digitPrecision = DEFAULT_DIGIT_PRECISION,\n        placeholder,\n        noDefault,\n        ...remainingProps\n    } = props;\n\n    const timeout = useRef<NodeJS.Timeout | null>(null);\n\n    const [isHoldingDownInc, setIsHoldingDownInc] = useState(false);\n    const [isHoldingDownDec, setIsHoldingDownDec] = useState(false);\n    const [internalValue, setInternalValue] = useState(value);\n\n    const initialTimeout = (callbackFn: VoidFunction) => {\n        if (timeout.current !== null) {\n            clearTimeout(timeout.current);\n        }\n        timeout.current = setTimeout(() => {\n            callbackFn();\n        }, INITIAL_TICK);\n    };\n\n    const recursiveTimeout = (callbackFn: VoidFunction) => {\n        timeout.current = setTimeout(() => {\n            callbackFn();\n        }, TICK_TIME);\n    };\n\n    // Update internal state if external value has changed\n    useEffect(() => {\n        if (internalValue !== value) {\n            setInternalValue(value);\n        }\n    }, [value]);\n\n    // Notify external component if internal value has changed\n    useEffect(() => {\n        if (internalValue !== value && onChange) {\n            onChange(internalValue);\n        }\n    }, [internalValue]);\n\n    useEffect(() => {\n        // Call increment function for a loop when button is holding down\n        if (isHoldingDownInc && !disabled) {\n            initialTimeout(incrementRecursively);\n        }\n\n        // Call decrement function for a loop when button is holding down\n        if (isHoldingDownDec && !disabled) {\n            initialTimeout(decrementRecursively);\n        }\n    }, [isHoldingDownInc, isHoldingDownDec]);\n\n    const incrementInternalValue = () => {\n        setInternalValue(val => {\n            const currentValue = convertNonIntegerToDefault(val, DEFAULT_VALUE);\n            const newValue = Number((currentValue + step).toFixed(digitPrecision));\n            const newValueLimited = newValue <= max ? newValue : val;\n            return newValueLimited;\n        });\n    };\n\n    const decrementInternalValue = () => {\n        setInternalValue(val => {\n            const currentValue = convertNonIntegerToDefault(val, DEFAULT_VALUE);\n            const newValue = Number((currentValue - step).toFixed(digitPrecision));\n            const newValueLimited = newValue >= min ? newValue : val;\n            return newValueLimited;\n        });\n    };\n\n    const incrementRecursively = () => {\n        incrementInternalValue();\n        recursiveTimeout(incrementRecursively);\n    };\n\n    const decrementRecursively = () => {\n        decrementInternalValue();\n        recursiveTimeout(decrementRecursively);\n    };\n\n    const handleMouseDownOnIncrement = () => {\n        if (disabled) {\n            return;\n        }\n        setIsHoldingDownInc(true);\n\n        // increment for first click\n        incrementInternalValue();\n    };\n\n    const handleMouseDownOnDecrement = () => {\n        if (disabled) {\n            return;\n        }\n        setIsHoldingDownDec(true);\n\n        // decrement for first click\n        decrementInternalValue();\n    };\n\n    const handleStopHolding = () => {\n        if (timeout.current !== null) {\n            clearTimeout(timeout.current);\n        }\n        setIsHoldingDownInc(false);\n        setIsHoldingDownDec(false);\n    };\n\n    const handleUpdatedNumberInputValue = (newValue: number | undefined) => {\n        // Set the internal value when the value of the actual input has changed,\n        // for instance the user has typed in a number manually and to\n        // use this number as base to increase or decrease from.\n        // Ignore empty value in case the user has removed it\n        if (newValue !== undefined && !(isHoldingDownDec && isHoldingDownInc)) {\n            setInternalValue(Number(newValue));\n        }\n        onChange?.(newValue);\n    };\n\n    const classes = classNames('NumberControl', className);\n\n    const controls = (\n        <div className='display-flex padding-left-10' onMouseOut={handleStopHolding} onBlur={handleStopHolding}>\n            <div\n                onMouseDown={handleMouseDownOnDecrement}\n                onMouseUp={handleStopHolding}\n                role='button'\n                aria-label='decrement-button'\n                className='decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer'\n            >\n                <div className='rioglyph rioglyph-minus scale-90' />\n            </div>\n            <div\n                onMouseDown={handleMouseDownOnIncrement}\n                onMouseUp={handleStopHolding}\n                role='button'\n                aria-label='increment-button'\n                className='incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5'\n            >\n                <div className='rioglyph rioglyph-plus scale-90' />\n            </div>\n        </div>\n    );\n\n    return (\n        <div {...remainingProps} className={classes}>\n            <NumberInput\n                id={id}\n                ref={ref}\n                min={min}\n                max={max}\n                value={internalValue}\n                step={step}\n                bsSize={bsSize}\n                disabled={disabled}\n                inputAddon={inputAddon}\n                errorMessage={errorMessage}\n                warningMessage={warningMessage}\n                messageWhiteSpace={messageWhiteSpace}\n                controls={controls}\n                unit={unit}\n                onChange={handleUpdatedNumberInputValue}\n                onKeyDown={onKeyDown}\n                digitPrecision={digitPrecision}\n                placeholder={placeholder}\n                noDefault={noDefault}\n            />\n        </div>\n    );\n});\n\nexport default NumberControl;\n"],"names":["INITIAL_TICK","TICK_TIME","DEFAULT_DIGIT_PRECISION","NumberControl","forwardRef","props","ref","id","min","DEFAULT_MIN","max","DEFAULT_MAX","step","DEFAULT_STEP","value","onChange","onKeyDown","noop","disabled","bsSize","className","unit","inputAddon","errorMessage","warningMessage","messageWhiteSpace","digitPrecision","placeholder","noDefault","remainingProps","timeout","useRef","isHoldingDownInc","setIsHoldingDownInc","useState","isHoldingDownDec","setIsHoldingDownDec","internalValue","setInternalValue","initialTimeout","callbackFn","recursiveTimeout","useEffect","incrementRecursively","decrementRecursively","incrementInternalValue","val","currentValue","convertNonIntegerToDefault","DEFAULT_VALUE","newValue","decrementInternalValue","handleMouseDownOnIncrement","handleMouseDownOnDecrement","handleStopHolding","handleUpdatedNumberInputValue","classes","classNames","jsx","NumberInput"],"mappings":"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"}

package/components/numberInput/NumberInput.js

@@ -1,7 +1,7 @@
 import { jsx as l, jsxs as N, Fragment as J } from "react/jsx-runtime";
 import { forwardRef as Q, useRef as Y, useState as Z } from "react";
-import _ from "classnames";
 import { noop as ee } from "es-toolkit/function";
+import _ from "../../utils/classNames.js";
 import re from "../../hooks/useAfterMount.js";
 const ne = 3, C = 0, se = 1, te = 0, oe = Number.MAX_VALUE, ae = [
   "0",

package/components/numberInput/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sources":["../../../src/components/numberInput/NumberInput.tsx"],"sourcesContent":["import React, { useState, useRef, forwardRef, type ForwardedRef } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport useAfterMount from '../../hooks/useAfterMount';\n\nconst DEFAULT_DIGIT_PRECISION = 3;\nexport const DEFAULT_VALUE = 0;\nexport const DEFAULT_STEP = 1;\nexport const DEFAULT_MIN = 0;\nexport const DEFAULT_MAX = Number.MAX_VALUE;\n\nconst validKeys = [\n    '0',\n    '1',\n    '2',\n    '3',\n    '4',\n    '5',\n    '6',\n    '7',\n    '8',\n    '9',\n    '.',\n    ',',\n    '-',\n    'Backspace',\n    'Tab',\n    'ArrowLeft',\n    'ArrowRight',\n    'ArrowDown',\n    'ArrowUp',\n];\n\n// Note: even if limits are set and input type is number, many browsers allow to enter invalid data\n// like entering characters or values outside the boundaries, hence we have to check the input here\n// See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number\n\nconst getValueFromProps = (\n    val: number | undefined,\n    min: number,\n    max: number,\n    placeholder: string | undefined,\n    noDefault: boolean\n) => {\n    // Show placeholder or nothing if given instead of 0 if requested for\n    if (val === undefined && (placeholder || noDefault)) {\n        return '';\n    }\n    return clampNumber(Number(val), min, max) || DEFAULT_VALUE;\n};\n\nconst clampNumber = (value: number, min: number, max: number) => {\n    if (value < min) {\n        return min;\n    }\n    if (value > max) {\n        return max;\n    }\n    return value;\n};\n\nexport const convertNonIntegerToDefault = (value: number | undefined, fallback: number) => {\n    return typeof value === 'number' && Number.isFinite(value) ? value : fallback;\n};\n\nconst isMultipleKeyInput = (\n    key: string,\n    event: React.KeyboardEvent<HTMLInputElement>,\n    previousKeyRef: React.MutableRefObject<string>\n) => {\n    return event.key === key && previousKeyRef.current.includes(key);\n};\n\nconst isInvalidAfter = (\n    key: string,\n    possiblePreviousKeys: string[],\n    event: React.KeyboardEvent<HTMLInputElement>,\n    previousKeyRef: React.MutableRefObject<string>\n) => {\n    return event.key === key && possiblePreviousKeys.includes(previousKeyRef.current);\n};\n\nexport type NumberInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'controls'> & {\n    /**\n     * A native input id attribute.\n     *\n     * Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * The minimum value of the input.\n     *\n     * @default 0\n     */\n    min?: number;\n\n    /**\n     * The maximum value of the input.\n     *\n     * @default Number.MAX_VALUE\n     */\n    max?: number;\n\n    /**\n     * The initial value of the input.\n     *\n     * Used to control the component from the outside.\n     *\n     * @default 0\n     */\n    value?: number;\n\n    /**\n     * Lets you omit the default value of \"0\" when the vale is not defined.\n     *\n     * The input will be empty in this case.\n     *\n     * @default false\n     */\n    noDefault?: boolean;\n\n    /**\n     * The size of increment or decrement (only works with number type).\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Enables or disabled the input.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback function triggered when the input value changes.\n     *\n     * When the value is removed by the user, the input is kept empty, but it triggers the callback without any value\n     * since the user has finished his input.\n     *\n     * @param value The new value of the input.\n     */\n    onChange?: (value?: number) => void;\n\n    /**\n     * Callback function that gets triggered after filtering out invalid keystrokes.\n     *\n     * @param event The keyboard event.\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n    /**\n     * Defines the size of the input to be rendered.\n     *\n     * @default 'md'\n     */\n    bsSize?: 'sm' | 'md' | 'lg';\n\n    /**\n     * A unit for this value.\n     *\n     * This will be shown in a dedicated input addon.\n     */\n    unit?: string | React.ReactNode;\n\n    /**\n     * A rioglyph icon tio be shown in front of the input.\n     */\n    inputAddon?: string;\n\n    /**\n     * Input error message.\n     */\n    errorMessage?: string | React.ReactNode;\n\n    /**\n     * Input warning message.\n     */\n    warningMessage?: string | React.ReactNode;\n\n    /**\n     * Feedback message width.\n     *\n     * @default 'normal'\n     */\n    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';\n\n    /**\n     * This prop is used by the NumberControl component to pass on the +/- spinner controls.\n     *\n     * @internal\n     */\n    controls?: React.ReactNode;\n\n    /**\n     * The input placeholder if no value is given.\n     */\n    placeholder?: string;\n\n    /**\n     * Number of digits after the comma the value should be fixed to.\n     *\n     * @default 3\n     */\n    digitPrecision?: number;\n\n    /**\n     * Additional classes to be set on the component.\n     */\n    className?: string;\n};\n\nconst NumberInput = forwardRef((props: NumberInputProps, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        id,\n        min: propMin,\n        max: propMax,\n        value: propValue,\n        step = DEFAULT_STEP,\n        disabled = false,\n        noDefault = false,\n        onChange,\n        onKeyDown = noop,\n        bsSize = 'md',\n        unit,\n        inputAddon,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n        controls,\n        placeholder,\n        digitPrecision = DEFAULT_DIGIT_PRECISION,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const previousKeyRef = useRef<string>('');\n\n    const min = convertNonIntegerToDefault(propMin, DEFAULT_MIN);\n    const max = convertNonIntegerToDefault(propMax, DEFAULT_MAX);\n\n    const value = getValueFromProps(propValue, min, max, placeholder, noDefault);\n\n    // Define local state and define initial values\n    const [state, setState] = useState({\n        value,\n        enteredValue: value,\n        isValid: true,\n    });\n\n    // Update internal value whenever the value prop from outside changes\n    useAfterMount(() => {\n        setState({\n            value: getValueFromProps(propValue, min, max, placeholder, noDefault),\n            enteredValue: value,\n            isValid: true,\n        });\n    }, [propValue, min, max, placeholder, noDefault, value]);\n\n    const applyValue = (newValue: string | number) => {\n        if (newValue === '-' || newValue === '') {\n            setState({\n                value: newValue,\n                enteredValue: newValue,\n                isValid: true,\n            });\n            return;\n        }\n\n        const enteredValue = Number(newValue);\n        const isValid = !Number.isNaN(enteredValue) && enteredValue >= min && enteredValue <= max;\n        const newValidValue = clampNumber(enteredValue, min, max);\n\n        setState({\n            value: newValidValue,\n            enteredValue,\n            isValid,\n        });\n\n        // Only call back the caller for valid values\n        isValid && onChange && onChange(newValidValue);\n    };\n\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        applyValue(event.target.value);\n    };\n\n    // Prevent entering exponent to avoid side effects\n    // See https://bugzilla.mozilla.org/show_bug.cgi?id=1398528\n    // Also preventing letter inputs or multiple consecutive characters\n    // that is possible by Firefox and Safari\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // Allow for key combination like \"ctrl + a\"\n        if (event.ctrlKey || event.altKey || event.metaKey) {\n            return;\n        }\n\n        // Check for multiple dots, commas or dashes (consecutive)\n        if (\n            isMultipleKeyInput('.', event, previousKeyRef) ||\n            isMultipleKeyInput(',', event, previousKeyRef) ||\n            isMultipleKeyInput('-', event, previousKeyRef) ||\n            isInvalidAfter(',', ['.', '-'], event, previousKeyRef) ||\n            isInvalidAfter('.', [',', '-'], event, previousKeyRef) ||\n            isInvalidAfter('-', ['.', ','], event, previousKeyRef) ||\n            event.key === 'Process' ||\n            event.key === 'Dead'\n        ) {\n            event.preventDefault();\n        }\n\n        // Filter out everything that is not a number\n        if (!validKeys.includes(event.key)) {\n            event.preventDefault();\n        }\n\n        previousKeyRef.current = event.key;\n\n        onKeyDown(event);\n    };\n\n    const handleBlur = () => {\n        // When the value is removed, keep the input empty but trigger the outside callback\n        // since the user has finished his input\n        const lastEnteredValue = state.enteredValue;\n        if (lastEnteredValue === '') {\n            onChange?.();\n            return;\n        }\n\n        // If there is no value defined and a placeholder is given or the default is not wanted,\n        // keep the input empty\n        if (!state.value && (noDefault || placeholder)) {\n            return;\n        }\n\n        // Otherwise, validate the input, round it according to digitPrecision,\n        // and clamp the value if the entered value exceeds the limitations\n        const convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue), DEFAULT_VALUE);\n        const validNumber = clampNumber(Number(convertedEnteredValue.toFixed(digitPrecision)), min, max);\n        applyValue(validNumber);\n    };\n\n    const handleWheel = (event: React.WheelEvent<HTMLInputElement>) => {\n        const target = event.target;\n        if (target instanceof HTMLInputElement) {\n            target.blur();\n        }\n    };\n\n    const inputGroupClassNames = classNames(\n        'input-group',\n        bsSize === 'sm' && 'input-group-sm',\n        bsSize === 'lg' && 'input-group-lg'\n    );\n\n    const inputClassNames = classNames(\n        'form-control',\n        'no-controls',\n        bsSize === 'sm' && 'input-sm',\n        bsSize === 'lg' && 'input-lg',\n        className\n    );\n\n    const hasFeedback = errorMessage || warningMessage;\n\n    const input = (\n        <input\n            {...remainingProps}\n            id={id}\n            type='number'\n            step={step}\n            min={min}\n            max={max}\n            value={state.isValid ? state.value : state.enteredValue}\n            className={inputClassNames}\n            disabled={disabled}\n            onBlur={handleBlur}\n            // onChange={state.value ? handleOnChange : undefined}\n            onChange={handleOnChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}\n            aria-label='number-input'\n            placeholder={placeholder}\n            onWheel={handleWheel}\n        />\n    );\n\n    return (\n        <div className={inputGroupClassNames}>\n            {inputAddon && (\n                <div className='input-group-addon'>\n                    <span className={inputAddon} />\n                </div>\n            )}\n            <div className='form-control-feedback-wrapper'>\n                {input}\n                {hasFeedback && (\n                    <>\n                        {errorMessage && <span className='form-control-feedback rioglyph rioglyph-error-sign' />}\n                        {warningMessage && <span className='form-control-feedback rioglyph rioglyph-warning-sign' />}\n                        <span className={`help-block white-space-${messageWhiteSpace}`}>\n                            <span>{errorMessage || warningMessage}</span>\n                        </span>\n                    </>\n                )}\n            </div>\n            {(unit || controls) && (\n                <div className={`input-group-addon ${disabled ? 'disabled pointer-events-none' : ''}`}>\n                    {unit && unit}\n                    {controls && controls}\n                </div>\n            )}\n        </div>\n    );\n});\n\nexport default NumberInput;\n"],"names":["DEFAULT_DIGIT_PRECISION","DEFAULT_VALUE","DEFAULT_STEP","DEFAULT_MIN","DEFAULT_MAX","validKeys","getValueFromProps","val","min","max","placeholder","noDefault","clampNumber","value","convertNonIntegerToDefault","fallback","isMultipleKeyInput","key","event","previousKeyRef","isInvalidAfter","possiblePreviousKeys","NumberInput","forwardRef","props","ref","id","propMin","propMax","propValue","step","disabled","onChange","onKeyDown","noop","bsSize","unit","inputAddon","errorMessage","warningMessage","messageWhiteSpace","controls","digitPrecision","className","remainingProps","useRef","state","setState","useState","useAfterMount","applyValue","newValue","enteredValue","isValid","newValidValue","handleOnChange","handleKeyDown","handleBlur","lastEnteredValue","convertedEnteredValue","validNumber","handleWheel","target","inputGroupClassNames","classNames","inputClassNames","hasFeedback","input","jsx","jsxs","Fragment"],"mappings":";;;;;AAMA,MAAMA,KAA0B,GACnBC,IAAgB,GAChBC,KAAe,GACfC,KAAc,GACdC,KAAc,OAAO,WAE5BC,KAAY;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAMMC,IAAoB,CACtBC,GACAC,GACAC,GACAC,GACAC,MAGIJ,MAAQ,WAAcG,KAAeC,KAC9B,KAEJC,EAAY,OAAOL,CAAG,GAAGC,GAAKC,CAAG,KAAKR,GAG3CW,IAAc,CAACC,GAAeL,GAAaC,MACzCI,IAAQL,IACDA,IAEPK,IAAQJ,IACDA,IAEJI,GAGEC,IAA6B,CAACD,GAA2BE,MAC3D,OAAOF,KAAU,YAAY,OAAO,SAASA,CAAK,IAAIA,IAAQE,GAGnEC,IAAqB,CACvBC,GACAC,GACAC,MAEOD,EAAM,QAAQD,KAAOE,EAAe,QAAQ,SAASF,CAAG,GAG7DG,IAAiB,CACnBH,GACAI,GACAH,GACAC,MAEOD,EAAM,QAAQD,KAAOI,EAAqB,SAASF,EAAe,OAAO,GAuI9EG,KAAcC,EAAW,CAACC,GAAyBC,MAAwC;AAC7F,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,KAAKC;AAAA,IACL,KAAKC;AAAA,IACL,OAAOC;AAAA,IACP,MAAAC,IAAO5B;AAAA,IACP,UAAA6B,IAAW;AAAA,IACX,WAAApB,IAAY;AAAA,IACZ,UAAAqB;AAAA,IACA,WAAAC,IAAYC;AAAA,IACZ,QAAAC,IAAS;AAAA,IACT,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,UAAAC;AAAA,IACA,aAAA/B;AAAA,IACA,gBAAAgC,IAAiB1C;AAAA,IACjB,WAAA2C,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHpB,GAEEL,IAAiB0B,EAAe,EAAE,GAElCrC,IAAMM,EAA2Ba,GAASxB,EAAW,GACrDM,IAAMK,EAA2Bc,GAASxB,EAAW,GAErDS,IAAQP,EAAkBuB,GAAWrB,GAAKC,GAAKC,GAAaC,CAAS,GAGrE,CAACmC,GAAOC,CAAQ,IAAIC,EAAS;AAAA,IAC/B,OAAAnC;AAAA,IACA,cAAcA;AAAA,IACd,SAAS;AAAA,EAAA,CACZ;AAGD,EAAAoC,GAAc,MAAM;AAChB,IAAAF,EAAS;AAAA,MACL,OAAOzC,EAAkBuB,GAAWrB,GAAKC,GAAKC,GAAaC,CAAS;AAAA,MACpE,cAAcE;AAAA,MACd,SAAS;AAAA,IAAA,CACZ;AAAA,EACL,GAAG,CAACgB,GAAWrB,GAAKC,GAAKC,GAAaC,GAAWE,CAAK,CAAC;AAEvD,QAAMqC,IAAa,CAACC,MAA8B;AAC9C,QAAIA,MAAa,OAAOA,MAAa,IAAI;AACrC,MAAAJ,EAAS;AAAA,QACL,OAAOI;AAAA,QACP,cAAcA;AAAA,QACd,SAAS;AAAA,MAAA,CACZ;AACD;AAAA,IACJ;AAEA,UAAMC,IAAe,OAAOD,CAAQ,GAC9BE,IAAU,CAAC,OAAO,MAAMD,CAAY,KAAKA,KAAgB5C,KAAO4C,KAAgB3C,GAChF6C,IAAgB1C,EAAYwC,GAAc5C,GAAKC,CAAG;AAExD,IAAAsC,EAAS;AAAA,MACL,OAAOO;AAAA,MACP,cAAAF;AAAA,MACA,SAAAC;AAAA,IAAA,CACH,GAGDA,KAAWrB,KAAYA,EAASsB,CAAa;AAAA,EACjD,GAEMC,IAAiB,CAACrC,MAA+C;AACnE,IAAAgC,EAAWhC,EAAM,OAAO,KAAK;AAAA,EACjC,GAMMsC,IAAgB,CAACtC,MAAiD;AAEpE,IAAIA,EAAM,WAAWA,EAAM,UAAUA,EAAM,aAMvCF,EAAmB,KAAKE,GAAOC,CAAc,KAC7CH,EAAmB,KAAKE,GAAOC,CAAc,KAC7CH,EAAmB,KAAKE,GAAOC,CAAc,KAC7CC,EAAe,KAAK,CAAC,KAAK,GAAG,GAAGF,GAAOC,CAAc,KACrDC,EAAe,KAAK,CAAC,KAAK,GAAG,GAAGF,GAAOC,CAAc,KACrDC,EAAe,KAAK,CAAC,KAAK,GAAG,GAAGF,GAAOC,CAAc,KACrDD,EAAM,QAAQ,aACdA,EAAM,QAAQ,WAEdA,EAAM,eAAA,GAILb,GAAU,SAASa,EAAM,GAAG,KAC7BA,EAAM,eAAA,GAGVC,EAAe,UAAUD,EAAM,KAE/Be,EAAUf,CAAK;AAAA,EACnB,GAEMuC,IAAa,MAAM;AAGrB,UAAMC,IAAmBZ,EAAM;AAC/B,QAAIY,MAAqB,IAAI;AACzB,MAAA1B,IAAA;AACA;AAAA,IACJ;AAIA,QAAI,CAACc,EAAM,UAAUnC,KAAaD;AAC9B;AAKJ,UAAMiD,IAAwB7C,EAA2B,OAAO4C,CAAgB,GAAGzD,CAAa,GAC1F2D,IAAchD,EAAY,OAAO+C,EAAsB,QAAQjB,CAAc,CAAC,GAAGlC,GAAKC,CAAG;AAC/F,IAAAyC,EAAWU,CAAW;AAAA,EAC1B,GAEMC,IAAc,CAAC3C,MAA8C;AAC/D,UAAM4C,IAAS5C,EAAM;AACrB,IAAI4C,aAAkB,oBAClBA,EAAO,KAAA;AAAA,EAEf,GAEMC,IAAuBC;AAAA,IACzB;AAAA,IACA7B,MAAW,QAAQ;AAAA,IACnBA,MAAW,QAAQ;AAAA,EAAA,GAGjB8B,IAAkBD;AAAA,IACpB;AAAA,IACA;AAAA,IACA7B,MAAW,QAAQ;AAAA,IACnBA,MAAW,QAAQ;AAAA,IACnBQ;AAAA,EAAA,GAGEuB,IAAc5B,KAAgBC,GAE9B4B,IACF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGxB;AAAA,MACJ,IAAAlB;AAAA,MACA,MAAK;AAAA,MACL,MAAAI;AAAA,MACA,KAAAtB;AAAA,MACA,KAAAC;AAAA,MACA,OAAOqC,EAAM,UAAUA,EAAM,QAAQA,EAAM;AAAA,MAC3C,WAAWmB;AAAA,MACX,UAAAlC;AAAA,MACA,QAAQ0B;AAAA,MAER,UAAUF;AAAA,MACV,WAAWC;AAAA,MACX,KAAA/B;AAAA,MACA,cAAW;AAAA,MACX,aAAAf;AAAA,MACA,SAASmD;AAAA,IAAA;AAAA,EAAA;AAIjB,SACI,gBAAAQ,EAAC,OAAA,EAAI,WAAWN,GACX,UAAA;AAAA,IAAA1B,KACG,gBAAA+B,EAAC,SAAI,WAAU,qBACX,4BAAC,QAAA,EAAK,WAAW/B,GAAY,EAAA,CACjC;AAAA,IAEJ,gBAAAgC,EAAC,OAAA,EAAI,WAAU,iCACV,UAAA;AAAA,MAAAF;AAAA,MACAD,KACG,gBAAAG,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAhC,KAAgB,gBAAA8B,EAAC,QAAA,EAAK,WAAU,qDAAA,CAAqD;AAAA,QACrF7B,KAAkB,gBAAA6B,EAAC,QAAA,EAAK,WAAU,uDAAA,CAAuD;AAAA,QAC1F,gBAAAA,EAAC,QAAA,EAAK,WAAW,0BAA0B5B,CAAiB,IACxD,UAAA,gBAAA4B,EAAC,QAAA,EAAM,UAAA9B,KAAgBC,EAAA,CAAe,EAAA,CAC1C;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA,GAER;AAAA,KACEH,KAAQK,MACN,gBAAA4B,EAAC,OAAA,EAAI,WAAW,qBAAqBtC,IAAW,iCAAiC,EAAE,IAC9E,UAAA;AAAA,MAAAK,KAAQA;AAAA,MACRK,KAAYA;AAAA,IAAA,EAAA,CACjB;AAAA,EAAA,GAER;AAER,CAAC;"}
+{"version":3,"file":"NumberInput.js","sources":["../../../src/components/numberInput/NumberInput.tsx"],"sourcesContent":["import React, { useState, useRef, forwardRef, type ForwardedRef } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport useAfterMount from '../../hooks/useAfterMount';\n\nconst DEFAULT_DIGIT_PRECISION = 3;\nexport const DEFAULT_VALUE = 0;\nexport const DEFAULT_STEP = 1;\nexport const DEFAULT_MIN = 0;\nexport const DEFAULT_MAX = Number.MAX_VALUE;\n\nconst validKeys = [\n    '0',\n    '1',\n    '2',\n    '3',\n    '4',\n    '5',\n    '6',\n    '7',\n    '8',\n    '9',\n    '.',\n    ',',\n    '-',\n    'Backspace',\n    'Tab',\n    'ArrowLeft',\n    'ArrowRight',\n    'ArrowDown',\n    'ArrowUp',\n];\n\n// Note: even if limits are set and input type is number, many browsers allow to enter invalid data\n// like entering characters or values outside the boundaries, hence we have to check the input here\n// See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number\n\nconst getValueFromProps = (\n    val: number | undefined,\n    min: number,\n    max: number,\n    placeholder: string | undefined,\n    noDefault: boolean\n) => {\n    // Show placeholder or nothing if given instead of 0 if requested for\n    if (val === undefined && (placeholder || noDefault)) {\n        return '';\n    }\n    return clampNumber(Number(val), min, max) || DEFAULT_VALUE;\n};\n\nconst clampNumber = (value: number, min: number, max: number) => {\n    if (value < min) {\n        return min;\n    }\n    if (value > max) {\n        return max;\n    }\n    return value;\n};\n\nexport const convertNonIntegerToDefault = (value: number | undefined, fallback: number) => {\n    return typeof value === 'number' && Number.isFinite(value) ? value : fallback;\n};\n\nconst isMultipleKeyInput = (\n    key: string,\n    event: React.KeyboardEvent<HTMLInputElement>,\n    previousKeyRef: React.MutableRefObject<string>\n) => {\n    return event.key === key && previousKeyRef.current.includes(key);\n};\n\nconst isInvalidAfter = (\n    key: string,\n    possiblePreviousKeys: string[],\n    event: React.KeyboardEvent<HTMLInputElement>,\n    previousKeyRef: React.MutableRefObject<string>\n) => {\n    return event.key === key && possiblePreviousKeys.includes(previousKeyRef.current);\n};\n\nexport type NumberInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'controls'> & {\n    /**\n     * A native input id attribute.\n     *\n     * Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * The minimum value of the input.\n     *\n     * @default 0\n     */\n    min?: number;\n\n    /**\n     * The maximum value of the input.\n     *\n     * @default Number.MAX_VALUE\n     */\n    max?: number;\n\n    /**\n     * The initial value of the input.\n     *\n     * Used to control the component from the outside.\n     *\n     * @default 0\n     */\n    value?: number;\n\n    /**\n     * Lets you omit the default value of \"0\" when the vale is not defined.\n     *\n     * The input will be empty in this case.\n     *\n     * @default false\n     */\n    noDefault?: boolean;\n\n    /**\n     * The size of increment or decrement (only works with number type).\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Enables or disabled the input.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback function triggered when the input value changes.\n     *\n     * When the value is removed by the user, the input is kept empty, but it triggers the callback without any value\n     * since the user has finished his input.\n     *\n     * @param value The new value of the input.\n     */\n    onChange?: (value?: number) => void;\n\n    /**\n     * Callback function that gets triggered after filtering out invalid keystrokes.\n     *\n     * @param event The keyboard event.\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n    /**\n     * Defines the size of the input to be rendered.\n     *\n     * @default 'md'\n     */\n    bsSize?: 'sm' | 'md' | 'lg';\n\n    /**\n     * A unit for this value.\n     *\n     * This will be shown in a dedicated input addon.\n     */\n    unit?: string | React.ReactNode;\n\n    /**\n     * A rioglyph icon tio be shown in front of the input.\n     */\n    inputAddon?: string;\n\n    /**\n     * Input error message.\n     */\n    errorMessage?: string | React.ReactNode;\n\n    /**\n     * Input warning message.\n     */\n    warningMessage?: string | React.ReactNode;\n\n    /**\n     * Feedback message width.\n     *\n     * @default 'normal'\n     */\n    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';\n\n    /**\n     * This prop is used by the NumberControl component to pass on the +/- spinner controls.\n     *\n     * @internal\n     */\n    controls?: React.ReactNode;\n\n    /**\n     * The input placeholder if no value is given.\n     */\n    placeholder?: string;\n\n    /**\n     * Number of digits after the comma the value should be fixed to.\n     *\n     * @default 3\n     */\n    digitPrecision?: number;\n\n    /**\n     * Additional classes to be set on the component.\n     */\n    className?: string;\n};\n\nconst NumberInput = forwardRef((props: NumberInputProps, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        id,\n        min: propMin,\n        max: propMax,\n        value: propValue,\n        step = DEFAULT_STEP,\n        disabled = false,\n        noDefault = false,\n        onChange,\n        onKeyDown = noop,\n        bsSize = 'md',\n        unit,\n        inputAddon,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n        controls,\n        placeholder,\n        digitPrecision = DEFAULT_DIGIT_PRECISION,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const previousKeyRef = useRef<string>('');\n\n    const min = convertNonIntegerToDefault(propMin, DEFAULT_MIN);\n    const max = convertNonIntegerToDefault(propMax, DEFAULT_MAX);\n\n    const value = getValueFromProps(propValue, min, max, placeholder, noDefault);\n\n    // Define local state and define initial values\n    const [state, setState] = useState({\n        value,\n        enteredValue: value,\n        isValid: true,\n    });\n\n    // Update internal value whenever the value prop from outside changes\n    useAfterMount(() => {\n        setState({\n            value: getValueFromProps(propValue, min, max, placeholder, noDefault),\n            enteredValue: value,\n            isValid: true,\n        });\n    }, [propValue, min, max, placeholder, noDefault, value]);\n\n    const applyValue = (newValue: string | number) => {\n        if (newValue === '-' || newValue === '') {\n            setState({\n                value: newValue,\n                enteredValue: newValue,\n                isValid: true,\n            });\n            return;\n        }\n\n        const enteredValue = Number(newValue);\n        const isValid = !Number.isNaN(enteredValue) && enteredValue >= min && enteredValue <= max;\n        const newValidValue = clampNumber(enteredValue, min, max);\n\n        setState({\n            value: newValidValue,\n            enteredValue,\n            isValid,\n        });\n\n        // Only call back the caller for valid values\n        isValid && onChange && onChange(newValidValue);\n    };\n\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        applyValue(event.target.value);\n    };\n\n    // Prevent entering exponent to avoid side effects\n    // See https://bugzilla.mozilla.org/show_bug.cgi?id=1398528\n    // Also preventing letter inputs or multiple consecutive characters\n    // that is possible by Firefox and Safari\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // Allow for key combination like \"ctrl + a\"\n        if (event.ctrlKey || event.altKey || event.metaKey) {\n            return;\n        }\n\n        // Check for multiple dots, commas or dashes (consecutive)\n        if (\n            isMultipleKeyInput('.', event, previousKeyRef) ||\n            isMultipleKeyInput(',', event, previousKeyRef) ||\n            isMultipleKeyInput('-', event, previousKeyRef) ||\n            isInvalidAfter(',', ['.', '-'], event, previousKeyRef) ||\n            isInvalidAfter('.', [',', '-'], event, previousKeyRef) ||\n            isInvalidAfter('-', ['.', ','], event, previousKeyRef) ||\n            event.key === 'Process' ||\n            event.key === 'Dead'\n        ) {\n            event.preventDefault();\n        }\n\n        // Filter out everything that is not a number\n        if (!validKeys.includes(event.key)) {\n            event.preventDefault();\n        }\n\n        previousKeyRef.current = event.key;\n\n        onKeyDown(event);\n    };\n\n    const handleBlur = () => {\n        // When the value is removed, keep the input empty but trigger the outside callback\n        // since the user has finished his input\n        const lastEnteredValue = state.enteredValue;\n        if (lastEnteredValue === '') {\n            onChange?.();\n            return;\n        }\n\n        // If there is no value defined and a placeholder is given or the default is not wanted,\n        // keep the input empty\n        if (!state.value && (noDefault || placeholder)) {\n            return;\n        }\n\n        // Otherwise, validate the input, round it according to digitPrecision,\n        // and clamp the value if the entered value exceeds the limitations\n        const convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue), DEFAULT_VALUE);\n        const validNumber = clampNumber(Number(convertedEnteredValue.toFixed(digitPrecision)), min, max);\n        applyValue(validNumber);\n    };\n\n    const handleWheel = (event: React.WheelEvent<HTMLInputElement>) => {\n        const target = event.target;\n        if (target instanceof HTMLInputElement) {\n            target.blur();\n        }\n    };\n\n    const inputGroupClassNames = classNames(\n        'input-group',\n        bsSize === 'sm' && 'input-group-sm',\n        bsSize === 'lg' && 'input-group-lg'\n    );\n\n    const inputClassNames = classNames(\n        'form-control',\n        'no-controls',\n        bsSize === 'sm' && 'input-sm',\n        bsSize === 'lg' && 'input-lg',\n        className\n    );\n\n    const hasFeedback = errorMessage || warningMessage;\n\n    const input = (\n        <input\n            {...remainingProps}\n            id={id}\n            type='number'\n            step={step}\n            min={min}\n            max={max}\n            value={state.isValid ? state.value : state.enteredValue}\n            className={inputClassNames}\n            disabled={disabled}\n            onBlur={handleBlur}\n            // onChange={state.value ? handleOnChange : undefined}\n            onChange={handleOnChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}\n            aria-label='number-input'\n            placeholder={placeholder}\n            onWheel={handleWheel}\n        />\n    );\n\n    return (\n        <div className={inputGroupClassNames}>\n            {inputAddon && (\n                <div className='input-group-addon'>\n                    <span className={inputAddon} />\n                </div>\n            )}\n            <div className='form-control-feedback-wrapper'>\n                {input}\n                {hasFeedback && (\n                    <>\n                        {errorMessage && <span className='form-control-feedback rioglyph rioglyph-error-sign' />}\n                        {warningMessage && <span className='form-control-feedback rioglyph rioglyph-warning-sign' />}\n                        <span className={`help-block white-space-${messageWhiteSpace}`}>\n                            <span>{errorMessage || warningMessage}</span>\n                        </span>\n                    </>\n                )}\n            </div>\n            {(unit || controls) && (\n                <div className={`input-group-addon ${disabled ? 'disabled pointer-events-none' : ''}`}>\n                    {unit && unit}\n                    {controls && controls}\n                </div>\n            )}\n        </div>\n    );\n});\n\nexport default NumberInput;\n"],"names":["DEFAULT_DIGIT_PRECISION","DEFAULT_VALUE","DEFAULT_STEP","DEFAULT_MIN","DEFAULT_MAX","validKeys","getValueFromProps","val","min","max","placeholder","noDefault","clampNumber","value","convertNonIntegerToDefault","fallback","isMultipleKeyInput","key","event","previousKeyRef","isInvalidAfter","possiblePreviousKeys","NumberInput","forwardRef","props","ref","id","propMin","propMax","propValue","step","disabled","onChange","onKeyDown","noop","bsSize","unit","inputAddon","errorMessage","warningMessage","messageWhiteSpace","controls","digitPrecision","className","remainingProps","useRef","state","setState","useState","useAfterMount","applyValue","newValue","enteredValue","isValid","newValidValue","handleOnChange","handleKeyDown","handleBlur","lastEnteredValue","convertedEnteredValue","validNumber","handleWheel","target","inputGroupClassNames","classNames","inputClassNames","hasFeedback","input","jsx","jsxs","Fragment"],"mappings":"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"}

package/components/onboarding/OnboardingTip.d.ts

@@ -1,4 +1,4 @@
-import { default as React, PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import { Options } from '@popperjs/core';
 import { TooltipWidth } from '../tooltip/Tooltip';
 import { TextAlignment } from '../../values/TextAlignment';
@@ -29,7 +29,11 @@ export type OnboardingTipProps = {
     /**
      * Define how the text should be aligned.
      *
-     * Possible values are: `left`, `center` or `right`.
+     * Possible values are:
+     *
+     * - `left`
+     * - `center`
+     * - `right`
      *
      * @default 'left'
      */
@@ -38,22 +42,23 @@ export type OnboardingTipProps = {
      * The tooltip's width.
      *
      * Possible values are:
+     *
      * - `auto`
-     * - 100
-     * - 150
-     * - 200
-     * - 250
-     * - 300
-     * - 350
-     * - 400
-     * - 450
-     * - 500
+     * - `100`
+     * - `150`
+     * - `200`
+     * - `250`
+     * - `300`
+     * - `350`
+     * - `400`
+     * - `450`
+     * - `500`
      */
     width?: TooltipWidth;
     /**
      * Callback function for when the component shall be hidden.
      *
-     * @default noop
+     * @default () => {}
      */
     onHide: VoidFunction;
     /**
@@ -88,6 +93,7 @@ export type OnboardingTipProps = {
      * Define how the component should be placed.
      *
      * Possible values are:
+     *
      * - `auto-start`
      * - `auto`
      * - `auto-end`

package/components/onboarding/OnboardingTip.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as p, Fragment as L } from "react/jsx-runtime";
-import G from "classnames";
-import { noop as h } from "es-toolkit/compat";
+import { noop as G } from "es-toolkit/compat";
+import h from "../../utils/classNames.js";
 import x from "../overlay/OverlayTrigger.js";
 import E from "../tooltip/Tooltip.js";
 import { TEXT_ALIGNMENT as t } from "../../values/TextAlignment.js";
@@ -12,7 +12,7 @@ const T = (O) => {
     placement: m = o.BOTTOM,
     title: l,
     content: i,
-    onHide: s = h,
+    onHide: s = G,
     children: a,
     textAlignment: N = t.LEFT,
     useInDialog: _ = !1,
@@ -21,7 +21,7 @@ const T = (O) => {
     width: f,
     preventOverflow: g = !0,
     popperConfig: R
-  } = O, d = G(_ && "z-index-max", n && n), I = /* @__PURE__ */ e(
+  } = O, d = h(_ && "z-index-max", n && n), I = /* @__PURE__ */ e(
     E,
     {
       className: d,

package/components/onboarding/OnboardingTip.js.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingTip.js","sources":["../../../src/components/onboarding/OnboardingTip.tsx"],"sourcesContent":["import React, { type PropsWithChildren, type ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\nimport type { Options } from '@popperjs/core';\n\nimport Button from '../button/Button';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport Tooltip, { type TooltipWidth } from '../tooltip/Tooltip';\nimport { TEXT_ALIGNMENT, type TextAlignment } from '../../values/TextAlignment';\nimport { PLACEMENT, type Placement } from '../../values/Placement';\n\nexport type OnboardingButton = {\n    text: string | React.ReactNode;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    iconName?: string;\n};\n\ntype PopperConfig = Partial<Options>;\n\nexport type OnboardingTipProps = {\n    /**\n     * The ID of the DOM element.\n     */\n    id?: string;\n\n    /**\n     * Indicates whether the onboarding tip is shown.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Defines whether to show a close icon.\n     *\n     * @default true\n     */\n    showCloseIcon?: boolean;\n\n    /**\n     * Define how the text should be aligned.\n     *\n     * Possible values are: `left`, `center` or `right`.\n     *\n     * @default 'left'\n     */\n    textAlignment?: TextAlignment;\n\n    /**\n     * The tooltip's width.\n     *\n     * Possible values are:\n     * - `auto`\n     * - 100\n     * - 150\n     * - 200\n     * - 250\n     * - 300\n     * - 350\n     * - 400\n     * - 450\n     * - 500\n     */\n    width?: TooltipWidth;\n\n    /**\n     * Callback function for when the component shall be hidden.\n     *\n     * @default noop\n     */\n    onHide: VoidFunction;\n\n    /**\n     * Changes the z-index.\n     *\n     * @default false\n     */\n    useInDialog?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * The title of the onboarding tip.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * The content of the onboarding tip.\n     */\n    content?: string | ReactNode;\n\n    /**\n     * Prevents onboarding tips from being cut off horizontally at screen borders.\n     *\n     * @default true\n     */\n    preventOverflow?: boolean;\n\n    /**\n     * A Popper.js config object passed to the underlying popper instance.\n     */\n    popperConfig?: PopperConfig;\n\n    /**\n     * Define how the component should be placed.\n     *\n     * Possible values are:\n     * - `auto-start`\n     * - `auto`\n     * - `auto-end`\n     * - `top-start`\n     * - `top`\n     * - `top-end`\n     * - `right-start`\n     * - `right`\n     * - `right-end`\n     * - `bottom-start`\n     * - `bottom`\n     * - `bottom-end`\n     * - `left-start`\n     * - `left`\n     * - `left-end`\n     *\n     * @default 'bottom'\n     */\n    placement?: Placement;\n};\n\nconst OnboardingTip = (props: PropsWithChildren<OnboardingTipProps>) => {\n    const {\n        id,\n        show = false,\n        placement = PLACEMENT.BOTTOM,\n        title,\n        content,\n        onHide = noop,\n        children,\n        textAlignment = TEXT_ALIGNMENT.LEFT,\n        useInDialog = false,\n        showCloseIcon = true,\n        className = '',\n        width,\n        preventOverflow = true,\n        popperConfig,\n    } = props;\n\n    const tooltipWrapperClasses = classNames(useInDialog && 'z-index-max', className && className);\n\n    const overlay = (\n        <Tooltip\n            className={tooltipWrapperClasses}\n            tooltipStyle={Tooltip.STYLE_ONBOARDING}\n            id={id}\n            onClick={onHide}\n            width={width}\n            textAlignment={textAlignment}\n            allowOnTouch\n        >\n            <div className='display-flex'>\n                <div className='display-flex flex-column flex-1-1'>\n                    {title && <div className='tooltip-title'>{title}</div>}\n                    {content && <div className='tooltip-content'>{content}</div>}\n                </div>\n                {showCloseIcon && <span className='tooltip-close rioglyph rioglyph-remove' />}\n            </div>\n        </Tooltip>\n    );\n\n    const actualPopperConfig: PopperConfig = popperConfig || {\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'preventOverflow',\n                // Popper.js default is false but we enable it by default\n                options: { altAxis: preventOverflow },\n            },\n            // Use an arrow modifier, the arrow ref will be injected in OverlayTrigger with the right props\n            { name: 'arrow', options: {} },\n        ],\n    };\n\n    const trigger = (\n        <OverlayTrigger\n            placement={placement}\n            trigger='click'\n            overlay={overlay}\n            onToggle={onHide}\n            show={show}\n            rootClose={false}\n            popperConfig={actualPopperConfig}\n        >\n            {children}\n        </OverlayTrigger>\n    );\n\n    // biome-ignore lint/complexity/noUselessFragments: fragment required\n    return show ? trigger : <>{children}</>;\n};\n\nOnboardingTip.AUTO_START = PLACEMENT.AUTO_START;\nOnboardingTip.AUTO = PLACEMENT.AUTO;\nOnboardingTip.AUTO_END = PLACEMENT.AUTO_END;\nOnboardingTip.TOP_START = PLACEMENT.TOP_START;\nOnboardingTip.TOP = PLACEMENT.TOP;\nOnboardingTip.TOP_END = PLACEMENT.TOP_END;\nOnboardingTip.BOTTOM_START = PLACEMENT.BOTTOM_START;\nOnboardingTip.BOTTOM = PLACEMENT.BOTTOM;\nOnboardingTip.BOTTOM_END = PLACEMENT.BOTTOM_END;\nOnboardingTip.RIGHT_START = PLACEMENT.RIGHT_START;\nOnboardingTip.RIGHT = PLACEMENT.RIGHT;\nOnboardingTip.RIGHT_END = PLACEMENT.RIGHT_END;\nOnboardingTip.LEFT_START = PLACEMENT.LEFT_START;\nOnboardingTip.LEFT = PLACEMENT.LEFT;\nOnboardingTip.LEFT_END = PLACEMENT.LEFT_END;\n\nOnboardingTip.TEXT_ALIGNMENT_LEFT = TEXT_ALIGNMENT.LEFT;\nOnboardingTip.TEXT_ALIGNMENT_CENTER = TEXT_ALIGNMENT.CENTER;\nOnboardingTip.TEXT_ALIGNMENT_RIGHT = TEXT_ALIGNMENT.RIGHT;\n\nexport default OnboardingTip;\n"],"names":["OnboardingTip","props","id","show","placement","PLACEMENT","title","content","onHide","noop","children","textAlignment","TEXT_ALIGNMENT","useInDialog","showCloseIcon","className","width","preventOverflow","popperConfig","tooltipWrapperClasses","classNames","overlay","jsx","Tooltip","jsxs","OverlayTrigger","Fragment"],"mappings":";;;;;;;AAmIA,MAAMA,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAYC,EAAU;AAAA,IACtB,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC,IAASC;AAAA,IACT,UAAAC;AAAA,IACA,eAAAC,IAAgBC,EAAe;AAAA,IAC/B,aAAAC,IAAc;AAAA,IACd,eAAAC,IAAgB;AAAA,IAChB,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,cAAAC;AAAA,EAAA,IACAjB,GAEEkB,IAAwBC,EAAWP,KAAe,eAAeE,KAAaA,CAAS,GAEvFM,IACF,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAWJ;AAAA,MACX,cAAcI,EAAQ;AAAA,MACtB,IAAArB;AAAA,MACA,SAASM;AAAA,MACT,OAAAQ;AAAA,MACA,eAAAL;AAAA,MACA,cAAY;AAAA,MAEZ,UAAA,gBAAAa,EAAC,OAAA,EAAI,WAAU,gBACX,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,qCACV,UAAA;AAAA,UAAAlB,KAAS,gBAAAgB,EAAC,OAAA,EAAI,WAAU,iBAAiB,UAAAhB,GAAM;AAAA,UAC/CC,KAAW,gBAAAe,EAAC,OAAA,EAAI,WAAU,mBAAmB,UAAAf,EAAA,CAAQ;AAAA,QAAA,GAC1D;AAAA,QACCO,KAAiB,gBAAAQ,EAAC,QAAA,EAAK,WAAU,yCAAA,CAAyC;AAAA,MAAA,EAAA,CAC/E;AAAA,IAAA;AAAA,EAAA;AAgCR,SAAOnB,IAdH,gBAAAmB;AAAA,IAACG;AAAA,IAAA;AAAA,MACG,WAAArB;AAAA,MACA,SAAQ;AAAA,MACR,SAAAiB;AAAA,MACA,UAAUb;AAAA,MACV,MAAAL;AAAA,MACA,WAAW;AAAA,MACX,cArBiCe,KAAgB;AAAA,QACrD,UAAU;AAAA,QACV,WAAW;AAAA,UACP;AAAA,YACI,MAAM;AAAA;AAAA,YAEN,SAAS,EAAE,SAASD,EAAA;AAAA,UAAgB;AAAA;AAAA,UAGxC,EAAE,MAAM,SAAS,SAAS,CAAA,EAAC;AAAA,QAAE;AAAA,MACjC;AAAA,MAaK,UAAAP;AAAA,IAAA;AAAA,EAAA,IAKe,gBAAAY,EAAAI,GAAA,EAAG,UAAAhB,EAAA,CAAS;AACxC;AAEAV,EAAc,aAAaK,EAAU;AACrCL,EAAc,OAAOK,EAAU;AAC/BL,EAAc,WAAWK,EAAU;AACnCL,EAAc,YAAYK,EAAU;AACpCL,EAAc,MAAMK,EAAU;AAC9BL,EAAc,UAAUK,EAAU;AAClCL,EAAc,eAAeK,EAAU;AACvCL,EAAc,SAASK,EAAU;AACjCL,EAAc,aAAaK,EAAU;AACrCL,EAAc,cAAcK,EAAU;AACtCL,EAAc,QAAQK,EAAU;AAChCL,EAAc,YAAYK,EAAU;AACpCL,EAAc,aAAaK,EAAU;AACrCL,EAAc,OAAOK,EAAU;AAC/BL,EAAc,WAAWK,EAAU;AAEnCL,EAAc,sBAAsBY,EAAe;AACnDZ,EAAc,wBAAwBY,EAAe;AACrDZ,EAAc,uBAAuBY,EAAe;"}
+{"version":3,"file":"OnboardingTip.js","sources":["../../../src/components/onboarding/OnboardingTip.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react';\nimport { noop } from 'es-toolkit/compat';\nimport type { Options } from '@popperjs/core';\n\nimport classNames from '../../utils/classNames';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport Tooltip, { type TooltipWidth } from '../tooltip/Tooltip';\nimport { TEXT_ALIGNMENT, type TextAlignment } from '../../values/TextAlignment';\nimport { PLACEMENT, type Placement } from '../../values/Placement';\n\nexport type OnboardingButton = {\n    text: string | React.ReactNode;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    iconName?: string;\n};\n\ntype PopperConfig = Partial<Options>;\n\nexport type OnboardingTipProps = {\n    /**\n     * The ID of the DOM element.\n     */\n    id?: string;\n\n    /**\n     * Indicates whether the onboarding tip is shown.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Defines whether to show a close icon.\n     *\n     * @default true\n     */\n    showCloseIcon?: boolean;\n\n    /**\n     * Define how the text should be aligned.\n     *\n     * Possible values are:\n     *\n     * - `left`\n     * - `center`\n     * - `right`\n     *\n     * @default 'left'\n     */\n    textAlignment?: TextAlignment;\n\n    /**\n     * The tooltip's width.\n     *\n     * Possible values are:\n     *\n     * - `auto`\n     * - `100`\n     * - `150`\n     * - `200`\n     * - `250`\n     * - `300`\n     * - `350`\n     * - `400`\n     * - `450`\n     * - `500`\n     */\n    width?: TooltipWidth;\n\n    /**\n     * Callback function for when the component shall be hidden.\n     *\n     * @default () => {}\n     */\n    onHide: VoidFunction;\n\n    /**\n     * Changes the z-index.\n     *\n     * @default false\n     */\n    useInDialog?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * The title of the onboarding tip.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * The content of the onboarding tip.\n     */\n    content?: string | ReactNode;\n\n    /**\n     * Prevents onboarding tips from being cut off horizontally at screen borders.\n     *\n     * @default true\n     */\n    preventOverflow?: boolean;\n\n    /**\n     * A Popper.js config object passed to the underlying popper instance.\n     */\n    popperConfig?: PopperConfig;\n\n    /**\n     * Define how the component should be placed.\n     *\n     * Possible values are:\n     *\n     * - `auto-start`\n     * - `auto`\n     * - `auto-end`\n     * - `top-start`\n     * - `top`\n     * - `top-end`\n     * - `right-start`\n     * - `right`\n     * - `right-end`\n     * - `bottom-start`\n     * - `bottom`\n     * - `bottom-end`\n     * - `left-start`\n     * - `left`\n     * - `left-end`\n     *\n     * @default 'bottom'\n     */\n    placement?: Placement;\n};\n\nconst OnboardingTip = (props: PropsWithChildren<OnboardingTipProps>) => {\n    const {\n        id,\n        show = false,\n        placement = PLACEMENT.BOTTOM,\n        title,\n        content,\n        onHide = noop,\n        children,\n        textAlignment = TEXT_ALIGNMENT.LEFT,\n        useInDialog = false,\n        showCloseIcon = true,\n        className = '',\n        width,\n        preventOverflow = true,\n        popperConfig,\n    } = props;\n\n    const tooltipWrapperClasses = classNames(useInDialog && 'z-index-max', className && className);\n\n    const overlay = (\n        <Tooltip\n            className={tooltipWrapperClasses}\n            tooltipStyle={Tooltip.STYLE_ONBOARDING}\n            id={id}\n            onClick={onHide}\n            width={width}\n            textAlignment={textAlignment}\n            allowOnTouch\n        >\n            <div className='display-flex'>\n                <div className='display-flex flex-column flex-1-1'>\n                    {title && <div className='tooltip-title'>{title}</div>}\n                    {content && <div className='tooltip-content'>{content}</div>}\n                </div>\n                {showCloseIcon && <span className='tooltip-close rioglyph rioglyph-remove' />}\n            </div>\n        </Tooltip>\n    );\n\n    const actualPopperConfig: PopperConfig = popperConfig || {\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'preventOverflow',\n                // Popper.js default is false but we enable it by default\n                options: { altAxis: preventOverflow },\n            },\n            // Use an arrow modifier, the arrow ref will be injected in OverlayTrigger with the right props\n            { name: 'arrow', options: {} },\n        ],\n    };\n\n    const trigger = (\n        <OverlayTrigger\n            placement={placement}\n            trigger='click'\n            overlay={overlay}\n            onToggle={onHide}\n            show={show}\n            rootClose={false}\n            popperConfig={actualPopperConfig}\n        >\n            {children}\n        </OverlayTrigger>\n    );\n\n    // biome-ignore lint/complexity/noUselessFragments: fragment required\n    return show ? trigger : <>{children}</>;\n};\n\nOnboardingTip.AUTO_START = PLACEMENT.AUTO_START;\nOnboardingTip.AUTO = PLACEMENT.AUTO;\nOnboardingTip.AUTO_END = PLACEMENT.AUTO_END;\nOnboardingTip.TOP_START = PLACEMENT.TOP_START;\nOnboardingTip.TOP = PLACEMENT.TOP;\nOnboardingTip.TOP_END = PLACEMENT.TOP_END;\nOnboardingTip.BOTTOM_START = PLACEMENT.BOTTOM_START;\nOnboardingTip.BOTTOM = PLACEMENT.BOTTOM;\nOnboardingTip.BOTTOM_END = PLACEMENT.BOTTOM_END;\nOnboardingTip.RIGHT_START = PLACEMENT.RIGHT_START;\nOnboardingTip.RIGHT = PLACEMENT.RIGHT;\nOnboardingTip.RIGHT_END = PLACEMENT.RIGHT_END;\nOnboardingTip.LEFT_START = PLACEMENT.LEFT_START;\nOnboardingTip.LEFT = PLACEMENT.LEFT;\nOnboardingTip.LEFT_END = PLACEMENT.LEFT_END;\n\nOnboardingTip.TEXT_ALIGNMENT_LEFT = TEXT_ALIGNMENT.LEFT;\nOnboardingTip.TEXT_ALIGNMENT_CENTER = TEXT_ALIGNMENT.CENTER;\nOnboardingTip.TEXT_ALIGNMENT_RIGHT = TEXT_ALIGNMENT.RIGHT;\n\nexport default OnboardingTip;\n"],"names":["OnboardingTip","props","id","show","placement","PLACEMENT","title","content","onHide","noop","children","textAlignment","TEXT_ALIGNMENT","useInDialog","showCloseIcon","className","width","preventOverflow","popperConfig","tooltipWrapperClasses","classNames","overlay","jsx","Tooltip","jsxs","OverlayTrigger","Fragment"],"mappings":";;;;;;;AAwIA,MAAMA,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAYC,EAAU;AAAA,IACtB,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC,IAASC;AAAA,IACT,UAAAC;AAAA,IACA,eAAAC,IAAgBC,EAAe;AAAA,IAC/B,aAAAC,IAAc;AAAA,IACd,eAAAC,IAAgB;AAAA,IAChB,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,cAAAC;AAAA,EAAA,IACAjB,GAEEkB,IAAwBC,EAAWP,KAAe,eAAeE,KAAaA,CAAS,GAEvFM,IACF,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAWJ;AAAA,MACX,cAAcI,EAAQ;AAAA,MACtB,IAAArB;AAAA,MACA,SAASM;AAAA,MACT,OAAAQ;AAAA,MACA,eAAAL;AAAA,MACA,cAAY;AAAA,MAEZ,UAAA,gBAAAa,EAAC,OAAA,EAAI,WAAU,gBACX,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,qCACV,UAAA;AAAA,UAAAlB,KAAS,gBAAAgB,EAAC,OAAA,EAAI,WAAU,iBAAiB,UAAAhB,GAAM;AAAA,UAC/CC,KAAW,gBAAAe,EAAC,OAAA,EAAI,WAAU,mBAAmB,UAAAf,EAAA,CAAQ;AAAA,QAAA,GAC1D;AAAA,QACCO,KAAiB,gBAAAQ,EAAC,QAAA,EAAK,WAAU,yCAAA,CAAyC;AAAA,MAAA,EAAA,CAC/E;AAAA,IAAA;AAAA,EAAA;AAgCR,SAAOnB,IAdH,gBAAAmB;AAAA,IAACG;AAAA,IAAA;AAAA,MACG,WAAArB;AAAA,MACA,SAAQ;AAAA,MACR,SAAAiB;AAAA,MACA,UAAUb;AAAA,MACV,MAAAL;AAAA,MACA,WAAW;AAAA,MACX,cArBiCe,KAAgB;AAAA,QACrD,UAAU;AAAA,QACV,WAAW;AAAA,UACP;AAAA,YACI,MAAM;AAAA;AAAA,YAEN,SAAS,EAAE,SAASD,EAAA;AAAA,UAAgB;AAAA;AAAA,UAGxC,EAAE,MAAM,SAAS,SAAS,CAAA,EAAC;AAAA,QAAE;AAAA,MACjC;AAAA,MAaK,UAAAP;AAAA,IAAA;AAAA,EAAA,IAKe,gBAAAY,EAAAI,GAAA,EAAG,UAAAhB,EAAA,CAAS;AACxC;AAEAV,EAAc,aAAaK,EAAU;AACrCL,EAAc,OAAOK,EAAU;AAC/BL,EAAc,WAAWK,EAAU;AACnCL,EAAc,YAAYK,EAAU;AACpCL,EAAc,MAAMK,EAAU;AAC9BL,EAAc,UAAUK,EAAU;AAClCL,EAAc,eAAeK,EAAU;AACvCL,EAAc,SAASK,EAAU;AACjCL,EAAc,aAAaK,EAAU;AACrCL,EAAc,cAAcK,EAAU;AACtCL,EAAc,QAAQK,EAAU;AAChCL,EAAc,YAAYK,EAAU;AACpCL,EAAc,aAAaK,EAAU;AACrCL,EAAc,OAAOK,EAAU;AAC/BL,EAAc,WAAWK,EAAU;AAEnCL,EAAc,sBAAsBY,EAAe;AACnDZ,EAAc,wBAAwBY,EAAe;AACrDZ,EAAc,uBAAuBY,EAAe;"}