@rio-cloud/rio-uikit 2.0.1 → 2.1.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.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 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    /**\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/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/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.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 classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\nimport type { Options } from '@popperjs/core';\n\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;"}

package/components/overlay/OverlayTrigger.d.ts

@@ -11,7 +11,7 @@ export type OverlayTriggerProps = {
      * Manually toggling `show` does **not** wait for `delay` to change the visibility.
      *
      * @controllable onToggle
-     * @default: false
+     * @default false
      */
     show?: boolean;
     /**
@@ -31,6 +31,15 @@ export type OverlayTriggerProps = {
      *
      * The `click` trigger ignores the configured `delay`.
      *
+     * Possible values are:
+     *
+     * - `OverlayTrigger.TRIGGER_CLICK`
+     * - `OverlayTrigger.TRIGGER_HOVER`
+     * - `OverlayTrigger.TRIGGER_HOVER`
+     * - `'hover'`
+     * - `'click'`
+     * - `'focus'`
+     *
      * @default 'hover'
      */
     trigger?: TriggerType;
@@ -48,6 +57,39 @@ export type OverlayTriggerProps = {
     /**
      * The placement of the Overlay in relation to it's `target`.
      *
+     * possible values are:
+     *
+     * - `OverlayTrigger.AUTO_START`
+     * - `OverlayTrigger.AUTO`
+     * - `OverlayTrigger.AUTO_END`
+     * - `OverlayTrigger.TOP_START`
+     * - `OverlayTrigger.TOP`
+     * - `OverlayTrigger.TOP_END`
+     * - `OverlayTrigger.RIGHT_START`
+     * - `OverlayTrigger.RIGHT`
+     * - `OverlayTrigger.RIGHT_END`
+     * - `OverlayTrigger.BOTTOM_START`
+     * - `OverlayTrigger.BOTTOM`
+     * - `OverlayTrigger.BOTTOM_END`
+     * - `OverlayTrigger.LEFT_START`
+     * - `OverlayTrigger.LEFT`
+     * - `OverlayTrigger.LEFT_END`
+     * - `'auto-start'`
+     * - `'auto'`
+     * - `'auto-end'`
+     * - `'top-start'`
+     * - `'top'`
+     * - `'top-end'`
+     * - `'right-start'`
+     * - `'right'`
+     * - `'right-end'`
+     * - `'bottom-start'`
+     * - `'bottom'`
+     * - `'bottom-end'`
+     * - `'left-start'`
+     * - `'left'`
+     * - `'left-end'`
+     *
      * @default 'top'
      */
     placement?: Placement;

package/components/overlay/OverlayTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayTrigger.js","sources":["../../../src/components/overlay/OverlayTrigger.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { usePopper, type Modifier } from 'react-popper';\nimport type { Options } from '@popperjs/core';\n\nimport { PLACEMENT, type Placement } from '../../values/Placement';\nimport { TRIGGER, type TriggerType } from '../../values/Trigger';\nimport mergeRefs from '../../utils/mergeRefs';\nimport { useClickOutsideWithRef } from '../../hooks/useClickOutside';\nimport { useChainedTimeout } from '../../hooks/useTimeout';\nimport { useUncontrolledProp } from '../../hooks/useUncontrollable';\n\ntype PopperConfig = Partial<Options>;\n\nexport type OverlayTriggerProps = {\n    /**\n     * The visibility of the Overlay. `show` is a _controlled_ prop so should be paired\n     * with `onToggle` to avoid breaking user interactions.\n     *\n     * Manually toggling `show` does **not** wait for `delay` to change the visibility.\n     *\n     * @controllable onToggle\n     * @default: false\n     */\n    show?: boolean;\n\n    /**\n     * The initial visibility state of the Overlay.\n     *\n     * @default false\n     */\n    defaultShow?: boolean;\n\n    /**\n     * Defines the usage of React Portal.\n     *\n     * @default true\n     */\n    enablePortal?: boolean;\n\n    /**\n     * Specify which action or actions trigger Overlay visibility\n     *\n     * The `click` trigger ignores the configured `delay`.\n     *\n     * @default 'hover'\n     */\n    trigger?: TriggerType;\n\n    /**\n     * A millisecond delay amount to show and hide the Overlay once triggered\n     */\n    delay?: number | { show?: number; hide?: number };\n\n    /**\n     * An element or text to overlay next to the target.\n     */\n    overlay: React.ReactElement;\n\n    /**\n     * The placement of the Overlay in relation to it's `target`.\n     *\n     * @default 'top'\n     */\n    placement?: Placement;\n\n    /**\n     * A Popper.js config object passed to the underlying popper instance.\n     * If no custom config is provided, a default config will be used. This default config\n     * includes an arrow element. In case you want to use a custom config and an arrow, include the arrow\n     * modifier so the correct arrow element can be injected for the arrow modifier.\n     *\n     * @example\n     * popperConfig={{\n     *     modifiers: [\n     *          {\n     *              name: 'offset',\n     *              options: {\n     *                  offset: [0, 5],\n     *              },\n     *          },\n     *          {\n     *              name: 'arrow',\n     *              options: {},\n     *          },\n     *      ],\n     *  }}\n     */\n    popperConfig?: PopperConfig;\n\n    /**\n     * Specify whether the overlay should trigger onHide when the user clicks outside the overlay.\n     *\n     * @default true\n     */\n    rootClose?: boolean;\n\n    /**\n     * A callback that fires when the user triggers a change in tooltip visibility.\n     *\n     * `onToggle` is called with the desired next `show`, and generally should be passed\n     * back to the `show` prop. `onToggle` fires _after_ the configured `delay`\n     *\n     * @controllable `show`\n     */\n    onToggle?: (show: boolean) => void;\n};\n\ntype TriggerProps = {\n    ref: React.Ref<unknown>;\n    onClick?: React.MouseEventHandler;\n    onFocus?: React.FocusEventHandler;\n    onBlur?: React.FocusEventHandler;\n    onMouseOver?: React.MouseEventHandler;\n    onMouseOut?: React.MouseEventHandler;\n};\n\nconst OverlayTrigger = (props: PropsWithChildren<OverlayTriggerProps>) => {\n    const {\n        show: propsShow,\n        defaultShow = false,\n        enablePortal = true,\n        trigger = TRIGGER.HOVER,\n        delay,\n        overlay,\n        placement = 'top',\n        popperConfig,\n        onToggle = () => {},\n        rootClose = true,\n        children,\n    } = props;\n\n    // Use a hook to handle controlled props that work in pairs like in this case the \"show\"  and \"onToggle\"\n    // props. It returns a setter function that automatically triggers the callback.\n    const [show, setShow] = useUncontrolledProp(propsShow, defaultShow, onToggle);\n\n    const hoverStateRef = useRef<string>('');\n\n    const timeout = useChainedTimeout();\n\n    const { onFocus, onBlur, onClick } =\n        typeof children !== 'function' ? React.Children.only(children as any).props : ({} as any);\n\n    // Simple implementation of mouseEnter and mouseLeave.\n    // React's built version is broken: https://github.com/facebook/react/issues/4251\n    // for cases when the trigger is disabled and mouseOut/Over can cause flicker\n    // moving from one child element to another.\n    const handleMouseOverOut = (\n        handler: (...args: [React.MouseEvent, ...unknown[]]) => void,\n        args: [React.MouseEvent, ...unknown[]],\n        _relatedNative: 'fromElement' | 'toElement'\n    ) => {\n        const [event] = args;\n        const target = event.currentTarget as Node;\n\n        const related = event.relatedTarget as Node | null;\n\n        if ((!related || related !== target) && !target.contains(related)) {\n            handler(...args);\n        }\n    };\n\n    const handleShow = () => {\n        timeout.clear();\n        hoverStateRef.current = 'show';\n\n        if (delay === 0 || (typeof delay !== 'number' && !delay?.show)) {\n            setShow(true);\n            return;\n        }\n\n        timeout.set(\n            () => {\n                if (hoverStateRef.current === 'show') {\n                    setShow(true);\n                }\n            },\n            typeof delay === 'number' ? delay : delay?.show\n        );\n    };\n\n    const handleHide = () => {\n        timeout.clear();\n        hoverStateRef.current = 'hide';\n\n        if (typeof delay === 'number' || !delay?.hide) {\n            setShow(false);\n            return;\n        }\n\n        timeout.set(() => {\n            if (hoverStateRef.current === 'hide') {\n                setShow(false);\n            }\n        }, delay?.hide);\n    };\n\n    const handleFocus = useCallback(\n        (...args: unknown[]) => {\n            handleShow();\n            onFocus?.(...args);\n        },\n        [handleShow, onFocus]\n    );\n\n    const handleBlur = useCallback(\n        (...args: unknown[]) => {\n            handleHide();\n            onBlur?.(...args);\n        },\n        [handleHide, onBlur]\n    );\n\n    const handleClick = useCallback(\n        (...args: unknown[]) => {\n            setShow(!show);\n            onClick?.(...args);\n        },\n        [onClick, setShow, show]\n    );\n\n    const handleMouseOver = useCallback(\n        (...args: [React.MouseEvent, ...unknown[]]) => {\n            handleMouseOverOut(handleShow, args, 'fromElement');\n        },\n        [handleShow]\n    );\n\n    const handleMouseOut = useCallback(\n        (...args: [React.MouseEvent, ...unknown[]]) => {\n            handleMouseOverOut(handleHide, args, 'toElement');\n        },\n        [handleHide]\n    );\n\n    const [triggerNode, setTriggerNode] = useState<HTMLButtonElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n\n    const [arrowPlacement, setArrowPlacement] = useState(placement);\n\n    const handleClickOutside = useCallback(\n        (event: MouseEvent | TouchEvent) => {\n            const isToggleTarget = triggerNode?.contains(event.target as Node);\n            const isOverlayTarget = popperElement?.contains(event.target as Node);\n\n            // Check if the click occurred outside the trigger element. Clicking on the trigger\n            // itself is handled by the onClick handler\n            if (show && rootClose && !isToggleTarget && !isOverlayTarget) {\n                handleHide();\n            }\n        },\n        [triggerNode, popperElement, rootClose, handleHide]\n    );\n\n    useClickOutsideWithRef(triggerNode, handleClickOutside);\n\n    const triggerProps: TriggerProps = {\n        ref: mergeRefs([(children as any).ref, setTriggerNode]),\n    };\n\n    if (trigger === 'click') {\n        triggerProps.onClick = handleClick;\n    } else if (trigger === 'focus') {\n        triggerProps.onFocus = handleFocus;\n        triggerProps.onBlur = handleBlur;\n    } else if (trigger === 'hover') {\n        triggerProps.onMouseOver = handleMouseOver;\n        triggerProps.onMouseOut = handleMouseOut;\n    }\n\n    const defaultPopperConfig = {\n        placement,\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\n            },\n            {\n                name: 'flip',\n                options: {\n                    fallbackPlacements: ['right', 'left', 'top'],\n                },\n            },\n        ],\n    };\n\n    if (popperConfig) {\n        popperConfig.placement = placement;\n\n        // if it has an arrow modifier, inject the arrow element\n        const updatedModifiers: Modifier<any, any>[] = [];\n        popperConfig.modifiers?.map((mod: Modifier<any, any>) => {\n            if (mod.name !== 'arrow') {\n                return updatedModifiers.push(mod);\n            }\n            return updatedModifiers.push({\n                ...mod,\n                options: {\n                    ...mod.options,\n                    element: arrowElement,\n                },\n            });\n        });\n\n        popperConfig.modifiers = updatedModifiers;\n    }\n\n    const popper = usePopper(triggerNode, popperElement, popperConfig || defaultPopperConfig);\n\n    // In case the overlay causes an overflow and the \"flip\" modifier\n    // changes the overlays placement, we nee to update the arrow placement as well\n    useEffect(() => {\n        if (popper.state) {\n            // Adjust arrow styles based on placement if necessary\n            setArrowPlacement(popper.state.placement);\n        }\n    }, [popper.state?.placement]);\n\n    const overlayElement = React.cloneElement(overlay, {\n        ...popper.attributes.popper,\n        ref: setPopperElement,\n        placement: arrowPlacement,\n        style: { ...popper.styles.popper },\n        arrowProps: {\n            ...popper.attributes.arrow,\n            style: popper.styles.arrow,\n            ref: setArrowElement,\n        },\n    });\n\n    return (\n        <>\n            {show && (enablePortal ? ReactDOM.createPortal(overlayElement, document.body) : overlayElement)}\n            {React.cloneElement(children as any, triggerProps)}\n        </>\n    );\n};\n\nOverlayTrigger.TRIGGER_CLICK = TRIGGER.CLICK;\nOverlayTrigger.TRIGGER_HOVER = TRIGGER.HOVER;\nOverlayTrigger.TRIGGER_FOCUS = TRIGGER.FOCUS;\n\n// placement\nOverlayTrigger.AUTO_START = PLACEMENT.AUTO_START;\nOverlayTrigger.AUTO = PLACEMENT.AUTO;\nOverlayTrigger.AUTO_END = PLACEMENT.AUTO_END;\nOverlayTrigger.TOP_START = PLACEMENT.TOP_START;\nOverlayTrigger.TOP = PLACEMENT.TOP;\nOverlayTrigger.TOP_END = PLACEMENT.TOP_END;\nOverlayTrigger.RIGHT_START = PLACEMENT.RIGHT_START;\nOverlayTrigger.RIGHT = PLACEMENT.RIGHT;\nOverlayTrigger.RIGHT_END = PLACEMENT.RIGHT_END;\nOverlayTrigger.BOTTOM_START = PLACEMENT.BOTTOM_START;\nOverlayTrigger.BOTTOM = PLACEMENT.BOTTOM;\nOverlayTrigger.BOTTOM_END = PLACEMENT.BOTTOM_END;\nOverlayTrigger.LEFT_START = PLACEMENT.LEFT_START;\nOverlayTrigger.LEFT = PLACEMENT.LEFT;\nOverlayTrigger.LEFT_END = PLACEMENT.LEFT_END;\n\nexport default OverlayTrigger;\n"],"names":["OverlayTrigger","props","propsShow","defaultShow","enablePortal","trigger","TRIGGER","delay","overlay","placement","popperConfig","onToggle","rootClose","children","show","setShow","useUncontrolledProp","hoverStateRef","useRef","timeout","useChainedTimeout","onFocus","onBlur","onClick","React","handleMouseOverOut","handler","args","_relatedNative","event","target","related","handleShow","handleHide","handleFocus","useCallback","handleBlur","handleClick","handleMouseOver","handleMouseOut","triggerNode","setTriggerNode","useState","popperElement","setPopperElement","arrowElement","setArrowElement","arrowPlacement","setArrowPlacement","handleClickOutside","isToggleTarget","isOverlayTarget","useClickOutsideWithRef","triggerProps","mergeRefs","defaultPopperConfig","updatedModifiers","mod","popper","usePopper","useEffect","overlayElement","jsxs","Fragment","ReactDOM","PLACEMENT"],"mappings":"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"}
+{"version":3,"file":"OverlayTrigger.js","sources":["../../../src/components/overlay/OverlayTrigger.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { usePopper, type Modifier } from 'react-popper';\nimport type { Options } from '@popperjs/core';\n\nimport { PLACEMENT, type Placement } from '../../values/Placement';\nimport { TRIGGER, type TriggerType } from '../../values/Trigger';\nimport mergeRefs from '../../utils/mergeRefs';\nimport { useClickOutsideWithRef } from '../../hooks/useClickOutside';\nimport { useChainedTimeout } from '../../hooks/useTimeout';\nimport { useUncontrolledProp } from '../../hooks/useUncontrollable';\n\ntype PopperConfig = Partial<Options>;\n\nexport type OverlayTriggerProps = {\n    /**\n     * The visibility of the Overlay. `show` is a _controlled_ prop so should be paired\n     * with `onToggle` to avoid breaking user interactions.\n     *\n     * Manually toggling `show` does **not** wait for `delay` to change the visibility.\n     *\n     * @controllable onToggle\n     * @default false\n     */\n    show?: boolean;\n\n    /**\n     * The initial visibility state of the Overlay.\n     *\n     * @default false\n     */\n    defaultShow?: boolean;\n\n    /**\n     * Defines the usage of React Portal.\n     *\n     * @default true\n     */\n    enablePortal?: boolean;\n\n    /**\n     * Specify which action or actions trigger Overlay visibility\n     *\n     * The `click` trigger ignores the configured `delay`.\n     *\n     * Possible values are:\n     *\n     * - `OverlayTrigger.TRIGGER_CLICK`\n     * - `OverlayTrigger.TRIGGER_HOVER`\n     * - `OverlayTrigger.TRIGGER_HOVER`\n     * - `'hover'`\n     * - `'click'`\n     * - `'focus'`\n     *\n     * @default 'hover'\n     */\n    trigger?: TriggerType;\n\n    /**\n     * A millisecond delay amount to show and hide the Overlay once triggered\n     */\n    delay?: number | { show?: number; hide?: number };\n\n    /**\n     * An element or text to overlay next to the target.\n     */\n    overlay: React.ReactElement;\n\n    /**\n     * The placement of the Overlay in relation to it's `target`.\n     *\n     * possible values are:\n     *\n     * - `OverlayTrigger.AUTO_START`\n     * - `OverlayTrigger.AUTO`\n     * - `OverlayTrigger.AUTO_END`\n     * - `OverlayTrigger.TOP_START`\n     * - `OverlayTrigger.TOP`\n     * - `OverlayTrigger.TOP_END`\n     * - `OverlayTrigger.RIGHT_START`\n     * - `OverlayTrigger.RIGHT`\n     * - `OverlayTrigger.RIGHT_END`\n     * - `OverlayTrigger.BOTTOM_START`\n     * - `OverlayTrigger.BOTTOM`\n     * - `OverlayTrigger.BOTTOM_END`\n     * - `OverlayTrigger.LEFT_START`\n     * - `OverlayTrigger.LEFT`\n     * - `OverlayTrigger.LEFT_END`\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 'top'\n     */\n    placement?: Placement;\n\n    /**\n     * A Popper.js config object passed to the underlying popper instance.\n     * If no custom config is provided, a default config will be used. This default config\n     * includes an arrow element. In case you want to use a custom config and an arrow, include the arrow\n     * modifier so the correct arrow element can be injected for the arrow modifier.\n     *\n     * @example\n     * popperConfig={{\n     *     modifiers: [\n     *          {\n     *              name: 'offset',\n     *              options: {\n     *                  offset: [0, 5],\n     *              },\n     *          },\n     *          {\n     *              name: 'arrow',\n     *              options: {},\n     *          },\n     *      ],\n     *  }}\n     */\n    popperConfig?: PopperConfig;\n\n    /**\n     * Specify whether the overlay should trigger onHide when the user clicks outside the overlay.\n     *\n     * @default true\n     */\n    rootClose?: boolean;\n\n    /**\n     * A callback that fires when the user triggers a change in tooltip visibility.\n     *\n     * `onToggle` is called with the desired next `show`, and generally should be passed\n     * back to the `show` prop. `onToggle` fires _after_ the configured `delay`\n     *\n     * @controllable `show`\n     */\n    onToggle?: (show: boolean) => void;\n};\n\ntype TriggerProps = {\n    ref: React.Ref<unknown>;\n    onClick?: React.MouseEventHandler;\n    onFocus?: React.FocusEventHandler;\n    onBlur?: React.FocusEventHandler;\n    onMouseOver?: React.MouseEventHandler;\n    onMouseOut?: React.MouseEventHandler;\n};\n\nconst OverlayTrigger = (props: PropsWithChildren<OverlayTriggerProps>) => {\n    const {\n        show: propsShow,\n        defaultShow = false,\n        enablePortal = true,\n        trigger = TRIGGER.HOVER,\n        delay,\n        overlay,\n        placement = 'top',\n        popperConfig,\n        onToggle = () => {},\n        rootClose = true,\n        children,\n    } = props;\n\n    // Use a hook to handle controlled props that work in pairs like in this case the \"show\"  and \"onToggle\"\n    // props. It returns a setter function that automatically triggers the callback.\n    const [show, setShow] = useUncontrolledProp(propsShow, defaultShow, onToggle);\n\n    const hoverStateRef = useRef<string>('');\n\n    const timeout = useChainedTimeout();\n\n    const { onFocus, onBlur, onClick } =\n        typeof children !== 'function' ? React.Children.only(children as any).props : ({} as any);\n\n    // Simple implementation of mouseEnter and mouseLeave.\n    // React's built version is broken: https://github.com/facebook/react/issues/4251\n    // for cases when the trigger is disabled and mouseOut/Over can cause flicker\n    // moving from one child element to another.\n    const handleMouseOverOut = (\n        handler: (...args: [React.MouseEvent, ...unknown[]]) => void,\n        args: [React.MouseEvent, ...unknown[]],\n        _relatedNative: 'fromElement' | 'toElement'\n    ) => {\n        const [event] = args;\n        const target = event.currentTarget as Node;\n\n        const related = event.relatedTarget as Node | null;\n\n        if ((!related || related !== target) && !target.contains(related)) {\n            handler(...args);\n        }\n    };\n\n    const handleShow = () => {\n        timeout.clear();\n        hoverStateRef.current = 'show';\n\n        if (delay === 0 || (typeof delay !== 'number' && !delay?.show)) {\n            setShow(true);\n            return;\n        }\n\n        timeout.set(\n            () => {\n                if (hoverStateRef.current === 'show') {\n                    setShow(true);\n                }\n            },\n            typeof delay === 'number' ? delay : delay?.show\n        );\n    };\n\n    const handleHide = () => {\n        timeout.clear();\n        hoverStateRef.current = 'hide';\n\n        if (typeof delay === 'number' || !delay?.hide) {\n            setShow(false);\n            return;\n        }\n\n        timeout.set(() => {\n            if (hoverStateRef.current === 'hide') {\n                setShow(false);\n            }\n        }, delay?.hide);\n    };\n\n    const handleFocus = useCallback(\n        (...args: unknown[]) => {\n            handleShow();\n            onFocus?.(...args);\n        },\n        [handleShow, onFocus]\n    );\n\n    const handleBlur = useCallback(\n        (...args: unknown[]) => {\n            handleHide();\n            onBlur?.(...args);\n        },\n        [handleHide, onBlur]\n    );\n\n    const handleClick = useCallback(\n        (...args: unknown[]) => {\n            setShow(!show);\n            onClick?.(...args);\n        },\n        [onClick, setShow, show]\n    );\n\n    const handleMouseOver = useCallback(\n        (...args: [React.MouseEvent, ...unknown[]]) => {\n            handleMouseOverOut(handleShow, args, 'fromElement');\n        },\n        [handleShow]\n    );\n\n    const handleMouseOut = useCallback(\n        (...args: [React.MouseEvent, ...unknown[]]) => {\n            handleMouseOverOut(handleHide, args, 'toElement');\n        },\n        [handleHide]\n    );\n\n    const [triggerNode, setTriggerNode] = useState<HTMLButtonElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n\n    const [arrowPlacement, setArrowPlacement] = useState(placement);\n\n    const handleClickOutside = useCallback(\n        (event: MouseEvent | TouchEvent) => {\n            const isToggleTarget = triggerNode?.contains(event.target as Node);\n            const isOverlayTarget = popperElement?.contains(event.target as Node);\n\n            // Check if the click occurred outside the trigger element. Clicking on the trigger\n            // itself is handled by the onClick handler\n            if (show && rootClose && !isToggleTarget && !isOverlayTarget) {\n                handleHide();\n            }\n        },\n        [triggerNode, popperElement, rootClose, handleHide]\n    );\n\n    useClickOutsideWithRef(triggerNode, handleClickOutside);\n\n    const triggerProps: TriggerProps = {\n        ref: mergeRefs([(children as any).ref, setTriggerNode]),\n    };\n\n    if (trigger === 'click') {\n        triggerProps.onClick = handleClick;\n    } else if (trigger === 'focus') {\n        triggerProps.onFocus = handleFocus;\n        triggerProps.onBlur = handleBlur;\n    } else if (trigger === 'hover') {\n        triggerProps.onMouseOver = handleMouseOver;\n        triggerProps.onMouseOut = handleMouseOut;\n    }\n\n    const defaultPopperConfig = {\n        placement,\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\n            },\n            {\n                name: 'flip',\n                options: {\n                    fallbackPlacements: ['right', 'left', 'top'],\n                },\n            },\n        ],\n    };\n\n    if (popperConfig) {\n        popperConfig.placement = placement;\n\n        // if it has an arrow modifier, inject the arrow element\n        const updatedModifiers: Modifier<any, any>[] = [];\n        popperConfig.modifiers?.map((mod: Modifier<any, any>) => {\n            if (mod.name !== 'arrow') {\n                return updatedModifiers.push(mod);\n            }\n            return updatedModifiers.push({\n                ...mod,\n                options: {\n                    ...mod.options,\n                    element: arrowElement,\n                },\n            });\n        });\n\n        popperConfig.modifiers = updatedModifiers;\n    }\n\n    const popper = usePopper(triggerNode, popperElement, popperConfig || defaultPopperConfig);\n\n    // In case the overlay causes an overflow and the \"flip\" modifier\n    // changes the overlays placement, we nee to update the arrow placement as well\n    useEffect(() => {\n        if (popper.state) {\n            // Adjust arrow styles based on placement if necessary\n            setArrowPlacement(popper.state.placement);\n        }\n    }, [popper.state?.placement]);\n\n    const overlayElement = React.cloneElement(overlay, {\n        ...popper.attributes.popper,\n        ref: setPopperElement,\n        placement: arrowPlacement,\n        style: { ...popper.styles.popper },\n        arrowProps: {\n            ...popper.attributes.arrow,\n            style: popper.styles.arrow,\n            ref: setArrowElement,\n        },\n    });\n\n    return (\n        <>\n            {show && (enablePortal ? ReactDOM.createPortal(overlayElement, document.body) : overlayElement)}\n            {React.cloneElement(children as any, triggerProps)}\n        </>\n    );\n};\n\nOverlayTrigger.TRIGGER_CLICK = TRIGGER.CLICK;\nOverlayTrigger.TRIGGER_HOVER = TRIGGER.HOVER;\nOverlayTrigger.TRIGGER_FOCUS = TRIGGER.FOCUS;\n\n// placement\nOverlayTrigger.AUTO_START = PLACEMENT.AUTO_START;\nOverlayTrigger.AUTO = PLACEMENT.AUTO;\nOverlayTrigger.AUTO_END = PLACEMENT.AUTO_END;\nOverlayTrigger.TOP_START = PLACEMENT.TOP_START;\nOverlayTrigger.TOP = PLACEMENT.TOP;\nOverlayTrigger.TOP_END = PLACEMENT.TOP_END;\nOverlayTrigger.RIGHT_START = PLACEMENT.RIGHT_START;\nOverlayTrigger.RIGHT = PLACEMENT.RIGHT;\nOverlayTrigger.RIGHT_END = PLACEMENT.RIGHT_END;\nOverlayTrigger.BOTTOM_START = PLACEMENT.BOTTOM_START;\nOverlayTrigger.BOTTOM = PLACEMENT.BOTTOM;\nOverlayTrigger.BOTTOM_END = PLACEMENT.BOTTOM_END;\nOverlayTrigger.LEFT_START = PLACEMENT.LEFT_START;\nOverlayTrigger.LEFT = PLACEMENT.LEFT;\nOverlayTrigger.LEFT_END = PLACEMENT.LEFT_END;\n\nexport default OverlayTrigger;\n"],"names":["OverlayTrigger","props","propsShow","defaultShow","enablePortal","trigger","TRIGGER","delay","overlay","placement","popperConfig","onToggle","rootClose","children","show","setShow","useUncontrolledProp","hoverStateRef","useRef","timeout","useChainedTimeout","onFocus","onBlur","onClick","React","handleMouseOverOut","handler","args","_relatedNative","event","target","related","handleShow","handleHide","handleFocus","useCallback","handleBlur","handleClick","handleMouseOver","handleMouseOut","triggerNode","setTriggerNode","useState","popperElement","setPopperElement","arrowElement","setArrowElement","arrowPlacement","setArrowPlacement","handleClickOutside","isToggleTarget","isOverlayTarget","useClickOutsideWithRef","triggerProps","mergeRefs","defaultPopperConfig","updatedModifiers","mod","popper","usePopper","useEffect","overlayElement","jsxs","Fragment","ReactDOM","PLACEMENT"],"mappings":"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"}

package/components/pager/Pager.d.ts

@@ -16,6 +16,7 @@ export type PagerProps = {
     /**
      * Set right alignment for "previous" pager content to be aligned
      * to the right side of the pager and the arrow on the left side.
+     *
      * @default false
      */
     alignRight?: boolean;
@@ -31,11 +32,13 @@ export type PagerProps = {
     variant?: ObjectValues<typeof PagerVariant>;
     /**
      * Sets the pager disabled.
+     *
      * @default false
      */
     disabled?: boolean;
     /**
      * Callback function for when the component is clicked.
+     *
      * @param event
      * @returns
      */

package/components/pager/Pager.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pager.js","sources":["../../../src/components/pager/Pager.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from 'classnames';\n\nimport type { ObjectValues } from '../../utils/ObjectValues';\n\nexport const PagerVariant = {\n    VARIANT_FULL: 'full',\n    VARIANT_COMPACT: 'compact',\n} as const;\n\nexport type PagerProps = {\n    /**\n     * The title or name of the section next/previous section.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The optional label for the full variant.\n     */\n    label?: string | React.ReactNode;\n\n    /**\n     * Set right alignment for \"previous\" pager content to be aligned\n     * to the right side of the pager and the arrow on the left side.\n     * @default false\n     */\n    alignRight?: boolean;\n\n    /**\n     * Define how large the component should be rendered.\n     *\n     * Possible values are:\n     * `Pager.VARIANT_FULL`, `Pager.VARIANT_COMPACT` or\n     * `full`, `compact`.\n     *\n     * @default `full`\n     */\n    variant?: ObjectValues<typeof PagerVariant>;\n\n    /**\n     * Sets the pager disabled.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback function for when the component is clicked.\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Additional classes for the wrapper element.\n     */\n    className?: string;\n};\n\nconst Pager = (props: PagerProps) => {\n    const {\n        title,\n        label,\n        alignRight = false,\n        variant = PagerVariant.VARIANT_FULL,\n        disabled = false,\n        onClick,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [isHover, setIsHover] = useState(false);\n\n    const handleEnter = () => !disabled && setIsHover(true);\n    const handleLeave = () => setIsHover(false);\n\n    const isCompactVariant = variant === Pager.VARIANT_COMPACT;\n\n    const wrapperClassesBase = classNames(\n        'Pager',\n        'bg-white',\n        'border',\n        'display-flex justify-space-between align-items-center',\n        isHover && 'border-color-highlight',\n        alignRight && 'flex-row-reverse',\n        disabled && 'pointer-events-none',\n        'cursor-pointer user-select-none'\n    );\n\n    const iconClassesBase = classNames(\n        'rioglyph',\n        disabled ? 'text-color-light' : 'text-color-darker',\n        isHover && 'text-color-highlight'\n    );\n\n    const titleClassesBase = classNames(\n        disabled ? 'text-color-light' : 'text-color-darker',\n        isHover && 'text-color-highlight'\n    );\n\n    // The compact version has a slightly different markup and different classes for the\n    // individual parts, hence we extend the base classes\n    if (isCompactVariant) {\n        const wrapperClassesCompact = classNames(\n            wrapperClassesBase,\n            'rounded-circle',\n            'padding-y-5 padding-x-15',\n            'width-auto',\n            className\n        );\n\n        const iconClassesCompact = classNames(\n            iconClassesBase,\n            alignRight ? 'rioglyph-chevron-left margin-right-5' : 'rioglyph-chevron-right margin-left-5',\n            'text-size-10'\n        );\n\n        return (\n            <div\n                {...remainingProps}\n                className={wrapperClassesCompact}\n                onMouseEnter={handleEnter}\n                onMouseLeave={handleLeave}\n                onClick={onClick}\n            >\n                <div className={`display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}`}>\n                    <div className={titleClassesBase}>{title}</div>\n                </div>\n                <span className={iconClassesCompact} />\n            </div>\n        );\n    }\n\n    const wrapperClassesFull = classNames(\n        wrapperClassesBase,\n        'rounded',\n        'padding-y-15 padding-x-20',\n        'width-100pct',\n        className\n    );\n\n    const iconClassesFull = classNames(\n        iconClassesBase,\n        alignRight ? 'rioglyph-arrow-left margin-right-10' : 'rioglyph-arrow-right margin-left-10',\n        'text-size-200pct'\n    );\n\n    const titleClassesFull = classNames(titleClassesBase, alignRight && 'text-right', 'text-size-16 text-medium');\n\n    return (\n        <div\n            {...remainingProps}\n            className={wrapperClassesFull}\n            onMouseEnter={handleEnter}\n            onMouseLeave={handleLeave}\n            onClick={onClick}\n        >\n            <div className={`display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}`}>\n                <div className='text-color-gray line-height-16'>{label}</div>\n                <div className={titleClassesFull}>{title}</div>\n            </div>\n            <div className='text-size-12 display-grid place-items-center'>\n                <span className={iconClassesFull} />\n            </div>\n        </div>\n    );\n};\n\nPager.VARIANT_FULL = PagerVariant.VARIANT_FULL;\nPager.VARIANT_COMPACT = PagerVariant.VARIANT_COMPACT;\n\nexport default Pager;\n"],"names":["PagerVariant","Pager","props","title","label","alignRight","variant","disabled","onClick","className","remainingProps","isHover","setIsHover","useState","handleEnter","handleLeave","isCompactVariant","wrapperClassesBase","classNames","iconClassesBase","titleClassesBase","wrapperClassesCompact","iconClassesCompact","jsxs","jsx","wrapperClassesFull","iconClassesFull","titleClassesFull"],"mappings":";;;AAMO,MAAMA,IAAe;AAAA,EACxB,cAAc;AAAA,EACd,iBAAiB;AACrB,GAkDMC,IAAQ,CAACC,MAAsB;AACjC,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,SAAAC,IAAUN,EAAa;AAAA,IACvB,UAAAO,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHR,GAEE,CAACS,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAc,MAAM,CAACP,KAAYK,EAAW,EAAI,GAChDG,IAAc,MAAMH,EAAW,EAAK,GAEpCI,IAAmBV,MAAYL,EAAM,iBAErCgB,IAAqBC;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAP,KAAW;AAAA,IACXN,KAAc;AAAA,IACdE,KAAY;AAAA,IACZ;AAAA,EAAA,GAGEY,IAAkBD;AAAA,IACpB;AAAA,IACAX,IAAW,qBAAqB;AAAA,IAChCI,KAAW;AAAA,EAAA,GAGTS,IAAmBF;AAAA,IACrBX,IAAW,qBAAqB;AAAA,IAChCI,KAAW;AAAA,EAAA;AAKf,MAAIK,GAAkB;AAClB,UAAMK,IAAwBH;AAAA,MAC1BD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAR;AAAA,IAAA,GAGEa,IAAqBJ;AAAA,MACvBC;AAAA,MACAd,IAAa,yCAAyC;AAAA,MACtD;AAAA,IAAA;AAGJ,WACI,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAGb;AAAA,QACJ,WAAWW;AAAA,QACX,cAAcP;AAAA,QACd,cAAcC;AAAA,QACd,SAAAP;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAgB,EAAC,OAAA,EAAI,WAAW,qCAAqCnB,IAAa,oBAAoB,EAAE,IACpF,UAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAWJ,GAAmB,UAAAjB,EAAA,CAAM,GAC7C;AAAA,UACA,gBAAAqB,EAAC,QAAA,EAAK,WAAWF,EAAA,CAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjD;AAEA,QAAMG,IAAqBP;AAAA,IACvBD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAR;AAAA,EAAA,GAGEiB,IAAkBR;AAAA,IACpBC;AAAA,IACAd,IAAa,wCAAwC;AAAA,IACrD;AAAA,EAAA,GAGEsB,IAAmBT,EAAWE,GAAkBf,KAAc,cAAc,0BAA0B;AAE5G,SACI,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGb;AAAA,MACJ,WAAWe;AAAA,MACX,cAAcX;AAAA,MACd,cAAcC;AAAA,MACd,SAAAP;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAe,EAAC,SAAI,WAAW,qCAAqClB,IAAa,oBAAoB,EAAE,IACpF,UAAA;AAAA,UAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAU,kCAAkC,UAAApB,GAAM;AAAA,UACvD,gBAAAoB,EAAC,OAAA,EAAI,WAAWG,GAAmB,UAAAxB,EAAA,CAAM;AAAA,QAAA,GAC7C;AAAA,QACA,gBAAAqB,EAAC,SAAI,WAAU,gDACX,4BAAC,QAAA,EAAK,WAAWE,GAAiB,EAAA,CACtC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;AAEAzB,EAAM,eAAeD,EAAa;AAClCC,EAAM,kBAAkBD,EAAa;"}
+{"version":3,"file":"Pager.js","sources":["../../../src/components/pager/Pager.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from 'classnames';\n\nimport type { ObjectValues } from '../../utils/ObjectValues';\n\nexport const PagerVariant = {\n    VARIANT_FULL: 'full',\n    VARIANT_COMPACT: 'compact',\n} as const;\n\nexport type PagerProps = {\n    /**\n     * The title or name of the section next/previous section.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The optional label for the full variant.\n     */\n    label?: string | React.ReactNode;\n\n    /**\n     * Set right alignment for \"previous\" pager content to be aligned\n     * to the right side of the pager and the arrow on the left side.\n     *\n     * @default false\n     */\n    alignRight?: boolean;\n\n    /**\n     * Define how large the component should be rendered.\n     *\n     * Possible values are:\n     * `Pager.VARIANT_FULL`, `Pager.VARIANT_COMPACT` or\n     * `full`, `compact`.\n     *\n     * @default `full`\n     */\n    variant?: ObjectValues<typeof PagerVariant>;\n\n    /**\n     * Sets the pager disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback function for when the component is clicked.\n     *\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Additional classes for the wrapper element.\n     */\n    className?: string;\n};\n\nconst Pager = (props: PagerProps) => {\n    const {\n        title,\n        label,\n        alignRight = false,\n        variant = PagerVariant.VARIANT_FULL,\n        disabled = false,\n        onClick,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [isHover, setIsHover] = useState(false);\n\n    const handleEnter = () => !disabled && setIsHover(true);\n    const handleLeave = () => setIsHover(false);\n\n    const isCompactVariant = variant === Pager.VARIANT_COMPACT;\n\n    const wrapperClassesBase = classNames(\n        'Pager',\n        'bg-white',\n        'border',\n        'display-flex justify-space-between align-items-center',\n        isHover && 'border-color-highlight',\n        alignRight && 'flex-row-reverse',\n        disabled && 'pointer-events-none',\n        'cursor-pointer user-select-none'\n    );\n\n    const iconClassesBase = classNames(\n        'rioglyph',\n        disabled ? 'text-color-light' : 'text-color-darker',\n        isHover && 'text-color-highlight'\n    );\n\n    const titleClassesBase = classNames(\n        disabled ? 'text-color-light' : 'text-color-darker',\n        isHover && 'text-color-highlight'\n    );\n\n    // The compact version has a slightly different markup and different classes for the\n    // individual parts, hence we extend the base classes\n    if (isCompactVariant) {\n        const wrapperClassesCompact = classNames(\n            wrapperClassesBase,\n            'rounded-circle',\n            'padding-y-5 padding-x-15',\n            'width-auto',\n            className\n        );\n\n        const iconClassesCompact = classNames(\n            iconClassesBase,\n            alignRight ? 'rioglyph-chevron-left margin-right-5' : 'rioglyph-chevron-right margin-left-5',\n            'text-size-10'\n        );\n\n        return (\n            <div\n                {...remainingProps}\n                className={wrapperClassesCompact}\n                onMouseEnter={handleEnter}\n                onMouseLeave={handleLeave}\n                onClick={onClick}\n            >\n                <div className={`display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}`}>\n                    <div className={titleClassesBase}>{title}</div>\n                </div>\n                <span className={iconClassesCompact} />\n            </div>\n        );\n    }\n\n    const wrapperClassesFull = classNames(\n        wrapperClassesBase,\n        'rounded',\n        'padding-y-15 padding-x-20',\n        'width-100pct',\n        className\n    );\n\n    const iconClassesFull = classNames(\n        iconClassesBase,\n        alignRight ? 'rioglyph-arrow-left margin-right-10' : 'rioglyph-arrow-right margin-left-10',\n        'text-size-200pct'\n    );\n\n    const titleClassesFull = classNames(titleClassesBase, alignRight && 'text-right', 'text-size-16 text-medium');\n\n    return (\n        <div\n            {...remainingProps}\n            className={wrapperClassesFull}\n            onMouseEnter={handleEnter}\n            onMouseLeave={handleLeave}\n            onClick={onClick}\n        >\n            <div className={`display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}`}>\n                <div className='text-color-gray line-height-16'>{label}</div>\n                <div className={titleClassesFull}>{title}</div>\n            </div>\n            <div className='text-size-12 display-grid place-items-center'>\n                <span className={iconClassesFull} />\n            </div>\n        </div>\n    );\n};\n\nPager.VARIANT_FULL = PagerVariant.VARIANT_FULL;\nPager.VARIANT_COMPACT = PagerVariant.VARIANT_COMPACT;\n\nexport default Pager;\n"],"names":["PagerVariant","Pager","props","title","label","alignRight","variant","disabled","onClick","className","remainingProps","isHover","setIsHover","useState","handleEnter","handleLeave","isCompactVariant","wrapperClassesBase","classNames","iconClassesBase","titleClassesBase","wrapperClassesCompact","iconClassesCompact","jsxs","jsx","wrapperClassesFull","iconClassesFull","titleClassesFull"],"mappings":";;;AAMO,MAAMA,IAAe;AAAA,EACxB,cAAc;AAAA,EACd,iBAAiB;AACrB,GAqDMC,IAAQ,CAACC,MAAsB;AACjC,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,SAAAC,IAAUN,EAAa;AAAA,IACvB,UAAAO,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHR,GAEE,CAACS,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAc,MAAM,CAACP,KAAYK,EAAW,EAAI,GAChDG,IAAc,MAAMH,EAAW,EAAK,GAEpCI,IAAmBV,MAAYL,EAAM,iBAErCgB,IAAqBC;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAP,KAAW;AAAA,IACXN,KAAc;AAAA,IACdE,KAAY;AAAA,IACZ;AAAA,EAAA,GAGEY,IAAkBD;AAAA,IACpB;AAAA,IACAX,IAAW,qBAAqB;AAAA,IAChCI,KAAW;AAAA,EAAA,GAGTS,IAAmBF;AAAA,IACrBX,IAAW,qBAAqB;AAAA,IAChCI,KAAW;AAAA,EAAA;AAKf,MAAIK,GAAkB;AAClB,UAAMK,IAAwBH;AAAA,MAC1BD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAR;AAAA,IAAA,GAGEa,IAAqBJ;AAAA,MACvBC;AAAA,MACAd,IAAa,yCAAyC;AAAA,MACtD;AAAA,IAAA;AAGJ,WACI,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAGb;AAAA,QACJ,WAAWW;AAAA,QACX,cAAcP;AAAA,QACd,cAAcC;AAAA,QACd,SAAAP;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAgB,EAAC,OAAA,EAAI,WAAW,qCAAqCnB,IAAa,oBAAoB,EAAE,IACpF,UAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAWJ,GAAmB,UAAAjB,EAAA,CAAM,GAC7C;AAAA,UACA,gBAAAqB,EAAC,QAAA,EAAK,WAAWF,EAAA,CAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjD;AAEA,QAAMG,IAAqBP;AAAA,IACvBD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAR;AAAA,EAAA,GAGEiB,IAAkBR;AAAA,IACpBC;AAAA,IACAd,IAAa,wCAAwC;AAAA,IACrD;AAAA,EAAA,GAGEsB,IAAmBT,EAAWE,GAAkBf,KAAc,cAAc,0BAA0B;AAE5G,SACI,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGb;AAAA,MACJ,WAAWe;AAAA,MACX,cAAcX;AAAA,MACd,cAAcC;AAAA,MACd,SAAAP;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAe,EAAC,SAAI,WAAW,qCAAqClB,IAAa,oBAAoB,EAAE,IACpF,UAAA;AAAA,UAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAU,kCAAkC,UAAApB,GAAM;AAAA,UACvD,gBAAAoB,EAAC,OAAA,EAAI,WAAWG,GAAmB,UAAAxB,EAAA,CAAM;AAAA,QAAA,GAC7C;AAAA,QACA,gBAAAqB,EAAC,SAAI,WAAU,gDACX,4BAAC,QAAA,EAAK,WAAWE,GAAiB,EAAA,CACtC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;AAEAzB,EAAM,eAAeD,EAAa;AAClCC,EAAM,kBAAkBD,EAAa;"}

package/components/popover/Popover.d.ts

@@ -17,6 +17,7 @@ export type PopoverProps = Omit<ComponentProps<'div'>, 'title'> & {
      * This is generally provided by the OverlayTrigger component positioning the Popover.
      *
      * Possible values are:
+     *
      * - `auto`
      * - `top`
      * - `right`

package/components/popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type RefAttributes,\n    type PropsWithChildren,\n    type ReactNode,\n    type ComponentProps,\n    isValidElement,\n    useState,\n    useEffect,\n} from 'react';\n\nimport { PLACEMENT } from '../../values/Placement';\n\nexport const PLACEMENT_MAP = {\n    AUTO: PLACEMENT.AUTO,\n    TOP: PLACEMENT.TOP,\n    RIGHT: PLACEMENT.RIGHT,\n    BOTTOM: PLACEMENT.BOTTOM,\n    LEFT: PLACEMENT.LEFT,\n} as const;\n\nexport type PopoverProps = Omit<ComponentProps<'div'>, 'title'> & {\n    /**\n     * HTML ID attribute, necessary for accessibility.\n     */\n    id: string;\n\n    /**\n     * Sets the direction the Popover is positioned towards.\n     *\n     * This is generally provided by the OverlayTrigger component positioning the Popover.\n     *\n     * Possible values are:\n     * - `auto`\n     * - `top`\n     * - `right`\n     * - `bottom`\n     * - `left`\n     */\n    placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left';\n\n    /**\n     * Additional props assigned to the arrow element. Internally used.\n     */\n    arrowProps?: Record<string, unknown>;\n\n    /**\n     * Any element to be rendered as the title of the Popover.\n     *\n     * It creates a `Popover.Title` inside the `Popover` passing the title directly into it.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * Additional classes to be set on the `Popover.Title` element.\n     */\n    titleClassName?: string;\n\n    /**\n     * Additional classes to be set on the `Popover.Content` element.\n     */\n    contentClassName?: string;\n\n    /**\n     * Additional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst PopoverTitle = ({ className = '', children }: PropsWithChildren<{ className?: string }>) => (\n    <div className={`popover-header popover-title ${className}`}>{children}</div>\n);\n\nconst PopoverContent = ({ className = '', children }: PropsWithChildren<{ className?: string }>) => (\n    <div className={`popover-content popover-body ${className}`}>{children}</div>\n);\n\nconst isPopoverTitleOrContent = (element: ReactNode): boolean => {\n    return isValidElement(element) && (element.type === PopoverTitle || element.type === PopoverContent);\n};\n\ntype PopoverType = ForwardRefExoticComponent<PropsWithChildren<PopoverProps> & RefAttributes<HTMLDivElement>> & {\n    Title: typeof PopoverTitle;\n    Content: typeof PopoverContent;\n};\n\nconst Popover = forwardRef<HTMLDivElement, PropsWithChildren<PopoverProps>>((props, ref) => {\n    const {\n        placement = 'bottom',\n        arrowProps,\n        title,\n        titleClassName = '',\n        contentClassName = '',\n        children,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const hasTitle = !!title;\n    const hasCustomContent = React.Children.toArray(children).some(isPopoverTitleOrContent);\n\n    // Mount the component but don't show it yet via CSS.\n    // After it is mounted, we set the visibility class to use CSS animation\n    const [isMounted, setIsMounted] = useState(false);\n    useEffect(() => setIsMounted(true), []);\n\n    return (\n        <div\n            {...remainingProps}\n            role='tooltip'\n            // x-placement is used by the css to define how to position the arrow.\n            // eslint-disable-next-line react/no-unknown-property\n            x-placement={placement}\n            ref={ref}\n            className={`popover fade ${isMounted ? 'show' : ''} ${className}`}\n        >\n            <div className='arrow' {...arrowProps} />\n            {hasTitle && <PopoverTitle className={titleClassName}>{title}</PopoverTitle>}\n            {hasCustomContent ? children : <PopoverContent className={contentClassName}>{children}</PopoverContent>}\n        </div>\n    );\n}) as PopoverType;\n\nPopover.Title = PopoverTitle;\nPopover.Content = PopoverContent;\n\nObject.assign(Popover, PLACEMENT_MAP);\n\nexport default Popover;\n"],"names":["PLACEMENT_MAP","PLACEMENT","PopoverTitle","className","children","jsx","PopoverContent","isPopoverTitleOrContent","element","isValidElement","Popover","forwardRef","props","ref","placement","arrowProps","title","titleClassName","contentClassName","remainingProps","hasTitle","hasCustomContent","React","isMounted","setIsMounted","useState","useEffect","jsxs"],"mappings":";;;AAcO,MAAMA,IAAgB;AAAA,EACzB,MAAMC,EAAU;AAAA,EAChB,KAAKA,EAAU;AAAA,EACf,OAAOA,EAAU;AAAA,EACjB,QAAQA,EAAU;AAAA,EAClB,MAAMA,EAAU;AACpB,GAkDMC,IAAe,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,EAAA,MACpC,gBAAAC,EAAC,OAAA,EAAI,WAAW,gCAAgCF,CAAS,IAAK,UAAAC,EAAA,CAAS,GAGrEE,IAAiB,CAAC,EAAE,WAAAH,IAAY,IAAI,UAAAC,EAAA,MACtC,gBAAAC,EAAC,OAAA,EAAI,WAAW,gCAAgCF,CAAS,IAAK,UAAAC,EAAA,CAAS,GAGrEG,IAA0B,CAACC,MACtBC,EAAeD,CAAO,MAAMA,EAAQ,SAASN,KAAgBM,EAAQ,SAASF,IAQnFI,IAAUC,EAA4D,CAACC,GAAOC,MAAQ;AACxF,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,UAAAd;AAAA,IACA,WAAAD,IAAY;AAAA,IACZ,GAAGgB;AAAA,EAAA,IACHP,GAEEQ,IAAW,CAAC,CAACJ,GACbK,IAAmBC,EAAM,SAAS,QAAQlB,CAAQ,EAAE,KAAKG,CAAuB,GAIhF,CAACgB,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAChD,SAAAC,EAAU,MAAMF,EAAa,EAAI,GAAG,CAAA,CAAE,GAGlC,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,MAAK;AAAA,MAGL,eAAaL;AAAA,MACb,KAAAD;AAAA,MACA,WAAW,gBAAgBU,IAAY,SAAS,EAAE,IAAIpB,CAAS;AAAA,MAE/D,UAAA;AAAA,QAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,SAAS,GAAGU,EAAA,CAAY;AAAA,QACtCK,KAAY,gBAAAf,EAACH,GAAA,EAAa,WAAWe,GAAiB,UAAAD,GAAM;AAAA,QAC5DK,IAAmBjB,IAAW,gBAAAC,EAACC,GAAA,EAAe,WAAWY,GAAmB,UAAAd,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlG,CAAC;AAEDM,EAAQ,QAAQR;AAChBQ,EAAQ,UAAUJ;AAElB,OAAO,OAAOI,GAASV,CAAa;"}
+{"version":3,"file":"Popover.js","sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type RefAttributes,\n    type PropsWithChildren,\n    type ReactNode,\n    type ComponentProps,\n    isValidElement,\n    useState,\n    useEffect,\n} from 'react';\n\nimport { PLACEMENT } from '../../values/Placement';\n\nexport const PLACEMENT_MAP = {\n    AUTO: PLACEMENT.AUTO,\n    TOP: PLACEMENT.TOP,\n    RIGHT: PLACEMENT.RIGHT,\n    BOTTOM: PLACEMENT.BOTTOM,\n    LEFT: PLACEMENT.LEFT,\n} as const;\n\nexport type PopoverProps = Omit<ComponentProps<'div'>, 'title'> & {\n    /**\n     * HTML ID attribute, necessary for accessibility.\n     */\n    id: string;\n\n    /**\n     * Sets the direction the Popover is positioned towards.\n     *\n     * This is generally provided by the OverlayTrigger component positioning the Popover.\n     *\n     * Possible values are:\n     *\n     * - `auto`\n     * - `top`\n     * - `right`\n     * - `bottom`\n     * - `left`\n     */\n    placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left';\n\n    /**\n     * Additional props assigned to the arrow element. Internally used.\n     */\n    arrowProps?: Record<string, unknown>;\n\n    /**\n     * Any element to be rendered as the title of the Popover.\n     *\n     * It creates a `Popover.Title` inside the `Popover` passing the title directly into it.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * Additional classes to be set on the `Popover.Title` element.\n     */\n    titleClassName?: string;\n\n    /**\n     * Additional classes to be set on the `Popover.Content` element.\n     */\n    contentClassName?: string;\n\n    /**\n     * Additional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst PopoverTitle = ({ className = '', children }: PropsWithChildren<{ className?: string }>) => (\n    <div className={`popover-header popover-title ${className}`}>{children}</div>\n);\n\nconst PopoverContent = ({ className = '', children }: PropsWithChildren<{ className?: string }>) => (\n    <div className={`popover-content popover-body ${className}`}>{children}</div>\n);\n\nconst isPopoverTitleOrContent = (element: ReactNode): boolean => {\n    return isValidElement(element) && (element.type === PopoverTitle || element.type === PopoverContent);\n};\n\ntype PopoverType = ForwardRefExoticComponent<PropsWithChildren<PopoverProps> & RefAttributes<HTMLDivElement>> & {\n    Title: typeof PopoverTitle;\n    Content: typeof PopoverContent;\n};\n\nconst Popover = forwardRef<HTMLDivElement, PropsWithChildren<PopoverProps>>((props, ref) => {\n    const {\n        placement = 'bottom',\n        arrowProps,\n        title,\n        titleClassName = '',\n        contentClassName = '',\n        children,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const hasTitle = !!title;\n    const hasCustomContent = React.Children.toArray(children).some(isPopoverTitleOrContent);\n\n    // Mount the component but don't show it yet via CSS.\n    // After it is mounted, we set the visibility class to use CSS animation\n    const [isMounted, setIsMounted] = useState(false);\n    useEffect(() => setIsMounted(true), []);\n\n    return (\n        <div\n            {...remainingProps}\n            role='tooltip'\n            // x-placement is used by the css to define how to position the arrow.\n            // eslint-disable-next-line react/no-unknown-property\n            x-placement={placement}\n            ref={ref}\n            className={`popover fade ${isMounted ? 'show' : ''} ${className}`}\n        >\n            <div className='arrow' {...arrowProps} />\n            {hasTitle && <PopoverTitle className={titleClassName}>{title}</PopoverTitle>}\n            {hasCustomContent ? children : <PopoverContent className={contentClassName}>{children}</PopoverContent>}\n        </div>\n    );\n}) as PopoverType;\n\nPopover.Title = PopoverTitle;\nPopover.Content = PopoverContent;\n\nObject.assign(Popover, PLACEMENT_MAP);\n\nexport default Popover;\n"],"names":["PLACEMENT_MAP","PLACEMENT","PopoverTitle","className","children","jsx","PopoverContent","isPopoverTitleOrContent","element","isValidElement","Popover","forwardRef","props","ref","placement","arrowProps","title","titleClassName","contentClassName","remainingProps","hasTitle","hasCustomContent","React","isMounted","setIsMounted","useState","useEffect","jsxs"],"mappings":";;;AAcO,MAAMA,IAAgB;AAAA,EACzB,MAAMC,EAAU;AAAA,EAChB,KAAKA,EAAU;AAAA,EACf,OAAOA,EAAU;AAAA,EACjB,QAAQA,EAAU;AAAA,EAClB,MAAMA,EAAU;AACpB,GAmDMC,IAAe,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,EAAA,MACpC,gBAAAC,EAAC,OAAA,EAAI,WAAW,gCAAgCF,CAAS,IAAK,UAAAC,EAAA,CAAS,GAGrEE,IAAiB,CAAC,EAAE,WAAAH,IAAY,IAAI,UAAAC,EAAA,MACtC,gBAAAC,EAAC,OAAA,EAAI,WAAW,gCAAgCF,CAAS,IAAK,UAAAC,EAAA,CAAS,GAGrEG,IAA0B,CAACC,MACtBC,EAAeD,CAAO,MAAMA,EAAQ,SAASN,KAAgBM,EAAQ,SAASF,IAQnFI,IAAUC,EAA4D,CAACC,GAAOC,MAAQ;AACxF,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,UAAAd;AAAA,IACA,WAAAD,IAAY;AAAA,IACZ,GAAGgB;AAAA,EAAA,IACHP,GAEEQ,IAAW,CAAC,CAACJ,GACbK,IAAmBC,EAAM,SAAS,QAAQlB,CAAQ,EAAE,KAAKG,CAAuB,GAIhF,CAACgB,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAChD,SAAAC,EAAU,MAAMF,EAAa,EAAI,GAAG,CAAA,CAAE,GAGlC,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,MAAK;AAAA,MAGL,eAAaL;AAAA,MACb,KAAAD;AAAA,MACA,WAAW,gBAAgBU,IAAY,SAAS,EAAE,IAAIpB,CAAS;AAAA,MAE/D,UAAA;AAAA,QAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,SAAS,GAAGU,EAAA,CAAY;AAAA,QACtCK,KAAY,gBAAAf,EAACH,GAAA,EAAa,WAAWe,GAAiB,UAAAD,GAAM;AAAA,QAC5DK,IAAmBjB,IAAW,gBAAAC,EAACC,GAAA,EAAe,WAAWY,GAAmB,UAAAd,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlG,CAAC;AAEDM,EAAQ,QAAQR;AAChBQ,EAAQ,UAAUJ;AAElB,OAAO,OAAOI,GAASV,CAAa;"}

package/components/preloader/ImagePreloader.d.ts

@@ -34,7 +34,7 @@ export type ImagePreloaderProps = {
      *
      * The function will receive props containing the `status` and `image` properties.
      *
-     * `status` will be one of 'PENDING', 'FAILED' or 'LOADED'. `image` is the Image element.
+     * `status` will be one of `PENDING`, `FAILED` or `LOADED`. `image` is the Image element.
      */
     children?: ImagePreloaderChild;
 };

package/components/preloader/ImagePreloader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePreloader.js","sources":["../../../src/components/preloader/ImagePreloader.tsx"],"sourcesContent":["import { type JSX, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nconst loadImage =\n    (onLoad: (event: Event) => void, onError: (event: Event | string) => void) =>\n    (src: string, isAnonymous: boolean) => {\n        const image = new Image();\n\n        if (isAnonymous) {\n            image.crossOrigin = 'anonymous';\n        }\n\n        // attach listeners\n        image.onload = onLoad;\n        image.onerror = onError;\n\n        // preload the actual image\n        image.src = src;\n\n        return image;\n    };\n\ntype ImagePreloaderStatus = 'PENDING' | 'FAILED' | 'LOADED';\n\nexport type ImagePreloaderChild = (props: {\n    status: ImagePreloaderStatus;\n    image: HTMLImageElement;\n}) => JSX.Element | null;\n\nexport type ImagePreloaderProps = {\n    /**\n     * The URL of the image to load.\n     */\n    src: string;\n\n    /**\n     * Invoked when the image is loaded.\n     *\n     * @param image The native Image object.\n     */\n    onLoaded?: (image: HTMLImageElement) => void;\n\n    /**\n     * Invoked when the image failed to load.\n     *\n     * @param image The native Image object.\n     */\n    onFailed?: (image: HTMLImageElement) => void;\n\n    /**\n     * Whether to set the \"crossOrigin\" to \"anonymous\".\n     *\n     * @default false\n     */\n    isAnonymous?: boolean;\n\n    /**\n     * A render function can be used to access both the current state and the image element.\n     *\n     * Using this, you can decide how to render the different states and/or the loaded image.\n     *\n     * The function will receive props containing the `status` and `image` properties.\n     *\n     * `status` will be one of 'PENDING', 'FAILED' or 'LOADED'. `image` is the Image element.\n     */\n    children?: ImagePreloaderChild;\n};\n\nconst ImagePreloader = (props: ImagePreloaderProps) => {\n    const { src, isAnonymous = false, onLoaded = noop, onFailed = noop, children } = props;\n\n    const [status, setStatus] = useState<ImagePreloaderStatus>('PENDING');\n    const [image, setImage] = useState<HTMLImageElement | null>(null);\n    const imageRef = useRef<HTMLImageElement | null>(null);\n\n    const willUnmount = useRef(false);\n\n    const handleImageLoaded = useCallback(() => {\n        const currentImage = imageRef.current;\n\n        if (willUnmount.current || !currentImage) {\n            return;\n        }\n        setStatus('LOADED');\n        onLoaded(currentImage);\n    }, [onLoaded]);\n\n    const handleImageFailed = useCallback(() => {\n        const currentImage = imageRef.current;\n\n        if (willUnmount.current || !currentImage) {\n            return;\n        }\n        setStatus('FAILED');\n        onFailed(currentImage);\n    }, [onFailed]);\n\n    const loadImageWithCallbacks = useMemo(\n        () => loadImage(handleImageLoaded, handleImageFailed),\n        [handleImageLoaded, handleImageFailed]\n    );\n\n    useEffect(() => {\n        willUnmount.current = false;\n        setStatus('PENDING');\n\n        const nextImage = loadImageWithCallbacks(src, isAnonymous);\n        imageRef.current = nextImage;\n        setImage(nextImage);\n\n        return () => {\n            willUnmount.current = true;\n        };\n    }, [src, isAnonymous, loadImageWithCallbacks]);\n\n    return children && image ? children({ status, image }) : null;\n};\n\nImagePreloader.STATUS_PENDING = 'PENDING';\nImagePreloader.STATUS_LOADED = 'LOADED';\nImagePreloader.STATUS_FAILED = 'FAILED';\n\nexport default ImagePreloader;\n"],"names":["loadImage","onLoad","onError","src","isAnonymous","image","ImagePreloader","props","onLoaded","noop","onFailed","children","status","setStatus","useState","setImage","imageRef","useRef","willUnmount","handleImageLoaded","useCallback","currentImage","handleImageFailed","loadImageWithCallbacks","useMemo","useEffect","nextImage"],"mappings":";;AAGA,MAAMA,IACF,CAACC,GAAgCC,MACjC,CAACC,GAAaC,MAAyB;AACnC,QAAMC,IAAQ,IAAI,MAAA;AAElB,SAAID,MACAC,EAAM,cAAc,cAIxBA,EAAM,SAASJ,GACfI,EAAM,UAAUH,GAGhBG,EAAM,MAAMF,GAELE;AACX,GAgDEC,IAAiB,CAACC,MAA+B;AACnD,QAAM,EAAE,KAAAJ,GAAK,aAAAC,IAAc,IAAO,UAAAI,IAAWC,GAAM,UAAAC,IAAWD,GAAM,UAAAE,EAAA,IAAaJ,GAE3E,CAACK,GAAQC,CAAS,IAAIC,EAA+B,SAAS,GAC9D,CAACT,GAAOU,CAAQ,IAAID,EAAkC,IAAI,GAC1DE,IAAWC,EAAgC,IAAI,GAE/CC,IAAcD,EAAO,EAAK,GAE1BE,IAAoBC,EAAY,MAAM;AACxC,UAAMC,IAAeL,EAAS;AAE9B,IAAIE,EAAY,WAAW,CAACG,MAG5BR,EAAU,QAAQ,GAClBL,EAASa,CAAY;AAAA,EACzB,GAAG,CAACb,CAAQ,CAAC,GAEPc,IAAoBF,EAAY,MAAM;AACxC,UAAMC,IAAeL,EAAS;AAE9B,IAAIE,EAAY,WAAW,CAACG,MAG5BR,EAAU,QAAQ,GAClBH,EAASW,CAAY;AAAA,EACzB,GAAG,CAACX,CAAQ,CAAC,GAEPa,IAAyBC;AAAA,IAC3B,MAAMxB,EAAUmB,GAAmBG,CAAiB;AAAA,IACpD,CAACH,GAAmBG,CAAiB;AAAA,EAAA;AAGzC,SAAAG,EAAU,MAAM;AACZ,IAAAP,EAAY,UAAU,IACtBL,EAAU,SAAS;AAEnB,UAAMa,IAAYH,EAAuBpB,GAAKC,CAAW;AACzD,WAAAY,EAAS,UAAUU,GACnBX,EAASW,CAAS,GAEX,MAAM;AACT,MAAAR,EAAY,UAAU;AAAA,IAC1B;AAAA,EACJ,GAAG,CAACf,GAAKC,GAAamB,CAAsB,CAAC,GAEtCZ,KAAYN,IAAQM,EAAS,EAAE,QAAAC,GAAQ,OAAAP,EAAA,CAAO,IAAI;AAC7D;AAEAC,EAAe,iBAAiB;AAChCA,EAAe,gBAAgB;AAC/BA,EAAe,gBAAgB;"}
+{"version":3,"file":"ImagePreloader.js","sources":["../../../src/components/preloader/ImagePreloader.tsx"],"sourcesContent":["import { type JSX, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nconst loadImage =\n    (onLoad: (event: Event) => void, onError: (event: Event | string) => void) =>\n    (src: string, isAnonymous: boolean) => {\n        const image = new Image();\n\n        if (isAnonymous) {\n            image.crossOrigin = 'anonymous';\n        }\n\n        // attach listeners\n        image.onload = onLoad;\n        image.onerror = onError;\n\n        // preload the actual image\n        image.src = src;\n\n        return image;\n    };\n\ntype ImagePreloaderStatus = 'PENDING' | 'FAILED' | 'LOADED';\n\nexport type ImagePreloaderChild = (props: {\n    status: ImagePreloaderStatus;\n    image: HTMLImageElement;\n}) => JSX.Element | null;\n\nexport type ImagePreloaderProps = {\n    /**\n     * The URL of the image to load.\n     */\n    src: string;\n\n    /**\n     * Invoked when the image is loaded.\n     *\n     * @param image The native Image object.\n     */\n    onLoaded?: (image: HTMLImageElement) => void;\n\n    /**\n     * Invoked when the image failed to load.\n     *\n     * @param image The native Image object.\n     */\n    onFailed?: (image: HTMLImageElement) => void;\n\n    /**\n     * Whether to set the \"crossOrigin\" to \"anonymous\".\n     *\n     * @default false\n     */\n    isAnonymous?: boolean;\n\n    /**\n     * A render function can be used to access both the current state and the image element.\n     *\n     * Using this, you can decide how to render the different states and/or the loaded image.\n     *\n     * The function will receive props containing the `status` and `image` properties.\n     *\n     * `status` will be one of `PENDING`, `FAILED` or `LOADED`. `image` is the Image element.\n     */\n    children?: ImagePreloaderChild;\n};\n\nconst ImagePreloader = (props: ImagePreloaderProps) => {\n    const { src, isAnonymous = false, onLoaded = noop, onFailed = noop, children } = props;\n\n    const [status, setStatus] = useState<ImagePreloaderStatus>('PENDING');\n    const [image, setImage] = useState<HTMLImageElement | null>(null);\n    const imageRef = useRef<HTMLImageElement | null>(null);\n\n    const willUnmount = useRef(false);\n\n    const handleImageLoaded = useCallback(() => {\n        const currentImage = imageRef.current;\n\n        if (willUnmount.current || !currentImage) {\n            return;\n        }\n        setStatus('LOADED');\n        onLoaded(currentImage);\n    }, [onLoaded]);\n\n    const handleImageFailed = useCallback(() => {\n        const currentImage = imageRef.current;\n\n        if (willUnmount.current || !currentImage) {\n            return;\n        }\n        setStatus('FAILED');\n        onFailed(currentImage);\n    }, [onFailed]);\n\n    const loadImageWithCallbacks = useMemo(\n        () => loadImage(handleImageLoaded, handleImageFailed),\n        [handleImageLoaded, handleImageFailed]\n    );\n\n    useEffect(() => {\n        willUnmount.current = false;\n        setStatus('PENDING');\n\n        const nextImage = loadImageWithCallbacks(src, isAnonymous);\n        imageRef.current = nextImage;\n        setImage(nextImage);\n\n        return () => {\n            willUnmount.current = true;\n        };\n    }, [src, isAnonymous, loadImageWithCallbacks]);\n\n    return children && image ? children({ status, image }) : null;\n};\n\nImagePreloader.STATUS_PENDING = 'PENDING';\nImagePreloader.STATUS_LOADED = 'LOADED';\nImagePreloader.STATUS_FAILED = 'FAILED';\n\nexport default ImagePreloader;\n"],"names":["loadImage","onLoad","onError","src","isAnonymous","image","ImagePreloader","props","onLoaded","noop","onFailed","children","status","setStatus","useState","setImage","imageRef","useRef","willUnmount","handleImageLoaded","useCallback","currentImage","handleImageFailed","loadImageWithCallbacks","useMemo","useEffect","nextImage"],"mappings":";;AAGA,MAAMA,IACF,CAACC,GAAgCC,MACjC,CAACC,GAAaC,MAAyB;AACnC,QAAMC,IAAQ,IAAI,MAAA;AAElB,SAAID,MACAC,EAAM,cAAc,cAIxBA,EAAM,SAASJ,GACfI,EAAM,UAAUH,GAGhBG,EAAM,MAAMF,GAELE;AACX,GAgDEC,IAAiB,CAACC,MAA+B;AACnD,QAAM,EAAE,KAAAJ,GAAK,aAAAC,IAAc,IAAO,UAAAI,IAAWC,GAAM,UAAAC,IAAWD,GAAM,UAAAE,EAAA,IAAaJ,GAE3E,CAACK,GAAQC,CAAS,IAAIC,EAA+B,SAAS,GAC9D,CAACT,GAAOU,CAAQ,IAAID,EAAkC,IAAI,GAC1DE,IAAWC,EAAgC,IAAI,GAE/CC,IAAcD,EAAO,EAAK,GAE1BE,IAAoBC,EAAY,MAAM;AACxC,UAAMC,IAAeL,EAAS;AAE9B,IAAIE,EAAY,WAAW,CAACG,MAG5BR,EAAU,QAAQ,GAClBL,EAASa,CAAY;AAAA,EACzB,GAAG,CAACb,CAAQ,CAAC,GAEPc,IAAoBF,EAAY,MAAM;AACxC,UAAMC,IAAeL,EAAS;AAE9B,IAAIE,EAAY,WAAW,CAACG,MAG5BR,EAAU,QAAQ,GAClBH,EAASW,CAAY;AAAA,EACzB,GAAG,CAACX,CAAQ,CAAC,GAEPa,IAAyBC;AAAA,IAC3B,MAAMxB,EAAUmB,GAAmBG,CAAiB;AAAA,IACpD,CAACH,GAAmBG,CAAiB;AAAA,EAAA;AAGzC,SAAAG,EAAU,MAAM;AACZ,IAAAP,EAAY,UAAU,IACtBL,EAAU,SAAS;AAEnB,UAAMa,IAAYH,EAAuBpB,GAAKC,CAAW;AACzD,WAAAY,EAAS,UAAUU,GACnBX,EAASW,CAAS,GAEX,MAAM;AACT,MAAAR,EAAY,UAAU;AAAA,IAC1B;AAAA,EACJ,GAAG,CAACf,GAAKC,GAAamB,CAAsB,CAAC,GAEtCZ,KAAYN,IAAQM,EAAS,EAAE,QAAAC,GAAQ,OAAAP,EAAA,CAAO,IAAI;AAC7D;AAEAC,EAAe,iBAAiB;AAChCA,EAAe,gBAAgB;AAC/BA,EAAe,gBAAgB;"}

package/components/radiobutton/RadioButton.d.ts

@@ -7,7 +7,7 @@ export type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onCl
     /**
      * The label position.
      *
-     * Possible values are: "horizontal" or "vertical".
+     * Possible values are: `'horizontal'` or `'vertical'`.
      *
      * @default 'vertical'
      */
@@ -25,7 +25,7 @@ export type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onCl
     /**
      * Callback function that is invoked when the radio button is clicked.
      *
-     * @default noop
+     * @default () => {}
      */
     onClick?: MouseEventHandler<{
         value: string | string[] | number;
@@ -34,7 +34,7 @@ export type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onCl
      * Callback function that is invoked when the radio button is toggled and the state should change (for controlled
      * usage).
      *
-     * @default noop
+     * @default () => {}
      */
     onChange?: ChangeEventHandler;
     /**
@@ -81,8 +81,10 @@ export type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onCl
     name?: string;
     /**
      * The value attribute is a string containing the radio button's value but __it is never shown to the user__.
+     *
      * It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are
      * currently checked are submitted, and the reported value is the value of the value attribute.
+     *
      * If the value is not otherwise specified, it is the string on by default.
      *
      * This is useful when using native `FormData` when submitting a form to get the selected radio button value.
@@ -92,8 +94,10 @@ export type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onCl
      * Number of the index used for keyboard support.
      *
      * An index of 0 means that the element should be focusable in sequential keyboard navigation, but its order is
-     * defined by the document's source order. To disable the focus set the value to -1. A positive value means the
-     * element should be focusable in sequential keyboard navigation, with its order defined by the value of the number.
+     * defined by the document's source order. To disable the focus set the value to -1.
+     *
+     * A positive value means the element should be focusable in sequential keyboard navigation,
+     * with its order defined by the value of the number.
      *
      * @default 0
      */