@rio-cloud/rio-uikit 2.0.0 → 2.1.0

package/components/map/utils/rendering.js

@@ -1,5 +1,5 @@
-import { MAP_TYPE_TERRAIN as _, MAP_TYPE_FLEET_STYLE as v, ENGINE_TYPE_HARP as M, ENGINE_TYPE_P2D as E, MAP_TYPE_DEFAULT as p, MAP_TYPE_NIGHT as A, MAP_TYPE_SATELLITE as d, DEFAULT_RASTER_LAYER_FORMAT as h } from "../components/constants.js";
-const L = () => window.devicePixelRatio >= 1.7 ? 200 : 100, w = (r, e) => r && e !== _ && e !== v, S = (r) => (
+import { MAP_TYPE_TERRAIN as _, MAP_TYPE_FLEET_STYLE as v, ENGINE_TYPE_HARP as M, ENGINE_TYPE_P2D as l, MAP_TYPE_DEFAULT as p, MAP_TYPE_NIGHT as A, MAP_TYPE_SATELLITE as d, DEFAULT_RASTER_LAYER_FORMAT as L } from "../components/constants.js";
+const h = () => window.devicePixelRatio >= 1.7 ? 200 : 100, u = (r, e) => r && e !== _ && e !== v, w = (r) => (
   // Initiate and authenticate your connection to the HERE platform:
   new H.service.Platform({
     apikey: r.apikey ?? "",
@@ -11,31 +11,30 @@ const L = () => window.devicePixelRatio >= 1.7 ? 200 : 100, w = (r, e) => r && e
     tileSize: 512
   }), s = new H.map.layer.TileLayer(n);
   return s.setMin(a), s.setMax(t), s;
-}, l = (r, e, a, t) => r?.getRasterTileService({
-  format: h,
+}, E = (r, e, a, t) => r?.getRasterTileService({
+  format: L,
   queryParams: {
     // https://www.here.com/docs/bundle/raster-tile-api-migration-guide/page/README.html#5-language
     lang: t,
-    ppi: L(),
+    ppi: h(),
     style: e,
     features: a
   }
-}), b = (r, e) => {
+}), S = (r, e) => {
   switch (r) {
     case v:
     case _:
-      return E;
+      return l;
     default:
-      return e ? M : E;
+      return e ? M : l;
   }
-}, I = async ({
+}, b = async ({
   baseLayerName: r,
   defaultLayers: e,
   enableWebGL: a,
   platform: t,
   engineType: n,
   language: s,
-  vehicleRestrictions: R,
   minZoom: i,
   maxZoom: c
 }) => {
@@ -55,6 +54,7 @@ const L = () => window.devicePixelRatio >= 1.7 ? 200 : 100, w = (r, e) => r && e
         };
         await t.createHybridLayers(
           y,
+          // biome-ignore lint/suspicious/noExplicitAny: whatever layer type
           (o) => (o.raster.setMin(i), o.raster.setMax(c), o.vector.setMin(i), o.vector.setMax(c), {
             baseLayer: o.raster,
             overlayLayer: o.vector
@@ -64,7 +64,7 @@ const L = () => window.devicePixelRatio >= 1.7 ? 200 : 100, w = (r, e) => r && e
       }
       return {
         baseLayer: P(
-          l(t, "explore.satellite.day", T, s),
+          E(t, "explore.satellite.day", T, s),
           n,
           i,
           c
@@ -74,7 +74,7 @@ const L = () => window.devicePixelRatio >= 1.7 ? 200 : 100, w = (r, e) => r && e
     case _:
       return {
         baseLayer: P(
-          l(t, "topo.day", T, s),
+          E(t, "topo.day", T, s),
           n,
           i,
           c
@@ -83,19 +83,19 @@ const L = () => window.devicePixelRatio >= 1.7 ? 200 : 100, w = (r, e) => r && e
     case v:
       return {
         baseLayer: P(
-          l(t, "logistics.day", T, s),
-          E,
+          E(t, "logistics.day", T, s),
+          l,
           i,
           c
         )
       };
     case A:
       return a ? (e?.vector.normal.mapnight.setMin(i), e?.vector.normal.mapnight.setMax(c), {
-        // @ts-ignore-next-line "vector.normal.mapnight" is newer than the types
+        // @ts-expect-error-next-line "vector.normal.mapnight" is newer than the types
         baseLayer: e.vector.normal.mapnight
       }) : {
         baseLayer: P(
-          l(t, "explore.night", T, s),
+          E(t, "explore.night", T, s),
           n,
           i,
           c
@@ -104,7 +104,7 @@ const L = () => window.devicePixelRatio >= 1.7 ? 200 : 100, w = (r, e) => r && e
     default:
       return {
         baseLayer: P(
-          l(t, "explore.day", T, s),
+          E(t, "explore.day", T, s),
           n,
           i,
           c
@@ -113,12 +113,12 @@ const L = () => window.devicePixelRatio >= 1.7 ? 200 : 100, w = (r, e) => r && e
   }
 };
 export {
-  I as getBaseLayer,
-  l as getBaseRasterTileService,
+  b as getBaseLayer,
+  E as getBaseRasterTileService,
   P as getBaseTileLayer,
-  b as getEngineType,
-  L as getPPI,
-  S as getPlatform,
-  w as isVectorBased
+  S as getEngineType,
+  h as getPPI,
+  w as getPlatform,
+  u as isVectorBased
 };
 //# sourceMappingURL=rendering.js.map

package/components/map/utils/rendering.js.map

@@ -1 +1 @@
-{"version":3,"file":"rendering.js","sources":["../../../../src/components/map/utils/rendering.ts"],"sourcesContent":["import {\n    DEFAULT_RASTER_LAYER_FORMAT,\n    MAP_TYPE_FLEET_STYLE,\n    MAP_TYPE_TERRAIN,\n    ENGINE_TYPE_P2D,\n    ENGINE_TYPE_HARP,\n    MAP_TYPE_DEFAULT,\n    MAP_TYPE_NIGHT,\n    MAP_TYPE_SATELLITE,\n} from '../components/constants';\nimport type { MapCredentials, MapType } from './mapTypes';\n\n// https://www.here.com/docs/bundle/raster-tile-api-migration-guide/page/README.html#6-pixels-per-inch-ppi\n// Note: higher PPI image tiles result in larger label size and show more label on the map\n// HERE Raster Tile API v3: 100, 200, 200 or 400, 400\nexport const getPPI = () => (window.devicePixelRatio >= 1.7 ? 200 : 100);\n\n// Even if webgl is enabled, some base layer cannot be rendered in HARP properly\nexport const isVectorBased = (enableWebGL: boolean, baseLayer: MapType) =>\n    enableWebGL && baseLayer !== MAP_TYPE_TERRAIN && baseLayer !== MAP_TYPE_FLEET_STYLE;\n\n// See Migration guide: https://developer.here.com/documentation/maps/3.1.37.0/dev_guide/topics/migration.html\nexport const getPlatform = (credentials: MapCredentials) =>\n    // Initiate and authenticate your connection to the HERE platform:\n    new H.service.Platform({\n        apikey: credentials.apikey ?? '',\n        useHTTPS: location.protocol === 'https:',\n    });\n\nexport const getBaseTileLayer = <T>(\n    rasterTileService: T,\n    engineType: H.Map.EngineType,\n    minZoom: number,\n    maxZoom: number\n) => {\n    // @ts-ignore-next-line \"H.service.rasterTile\" is newer that the types\n    const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService, {\n        engineType,\n        tileSize: 512,\n    });\n\n    const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider);\n\n    // force the tile layer minimum zoom (furthest away possible) and maximum zoom (nearest) to the desired level\n    rasterTileLayer.setMin(minZoom);\n    rasterTileLayer.setMax(maxZoom);\n\n    return rasterTileLayer;\n};\n\nexport const getBaseRasterTileService = (\n    platform: H.service.Platform,\n    style: string,\n    features: string,\n    lang: string\n) => {\n    // @ts-ignore-next-line \"getRasterTileService\" is newer that the types\n    return platform?.getRasterTileService({\n        format: DEFAULT_RASTER_LAYER_FORMAT,\n        queryParams: {\n            // https://www.here.com/docs/bundle/raster-tile-api-migration-guide/page/README.html#5-language\n            lang,\n            ppi: getPPI(),\n            style,\n            features,\n        },\n    });\n};\n\nexport const getEngineType = (baseLayerName: string, enableWebGL: boolean) => {\n    switch (baseLayerName) {\n        case MAP_TYPE_FLEET_STYLE:\n        case MAP_TYPE_TERRAIN:\n            return ENGINE_TYPE_P2D;\n        default:\n            return enableWebGL ? ENGINE_TYPE_HARP : ENGINE_TYPE_P2D;\n    }\n};\n\nexport type BaseLayer = {\n    baseLayerName: string;\n    defaultLayers: H.service.DefaultLayers;\n    enableWebGL: boolean;\n    platform: H.service.Platform;\n    engineType: H.Map.EngineType;\n    language: string;\n    vehicleRestrictions: boolean;\n    minZoom: number;\n    maxZoom: number;\n};\n\nexport type BaseLayerResponse = { baseLayer: H.map.layer.Layer; overlayLayer?: H.map.layer.Layer };\n\nexport const getBaseLayer = async ({\n    baseLayerName,\n    defaultLayers,\n    enableWebGL,\n    platform,\n    engineType,\n    language,\n    vehicleRestrictions,\n    minZoom,\n    maxZoom,\n}: BaseLayer): Promise<BaseLayerResponse> => {\n    const restriction = 'disabled'; // vehicleRestrictions ? 'active_and_inactive' : 'disabled';\n    const features = `pois:all,environmental_zones:all,congestion_zones:all,vehicle_restrictions:${restriction}`;\n\n    if (enableWebGL && baseLayerName === MAP_TYPE_DEFAULT) {\n        defaultLayers?.vector.normal.map.setMin(minZoom);\n        defaultLayers?.vector.normal.map.setMax(maxZoom);\n\n        return {\n            baseLayer: defaultLayers?.vector.normal.map,\n        };\n    }\n    switch (baseLayerName) {\n        case MAP_TYPE_SATELLITE: {\n            if (enableWebGL) {\n                // This is a workaround for setting the min and max zoom limit for satellite map\n                // since the setMin/setMax cannot be set on the \"defaultLayers.hybrid.liteday.raster\".\n                // The HERE support suggested to create a hybrid layer for that and set the zoom limits\n                // on the two layers.\n                const hybridStyleConfig = {\n                    base: {\n                        style: 'oslo',\n                        scheme: 'hybrid.day',\n                    },\n                };\n\n                // This method creates hybrid map layers. A hybrid map consists of raster satellite base layer and vector layers on top.\n                // Layers created by this method can be used only when the Map is instantiated with H.Map.EngineType.HARP engineType.\n                // See https://www.here.com/docs/bundle/maps-api-for-javascript-api-reference/page/H.service.Platform_4.html#createHybridLayers\n                // @ts-ignore-next-line\n                await platform.createHybridLayers(\n                    hybridStyleConfig,\n                    (layers: any) => {\n                        layers.raster.setMin(minZoom);\n                        layers.raster.setMax(maxZoom);\n\n                        layers.vector.setMin(minZoom);\n                        layers.vector.setMax(maxZoom);\n\n                        return {\n                            baseLayer: layers.raster,\n                            overlayLayer: layers.vector,\n                        };\n                    },\n                    console.error\n                );\n            }\n            return {\n                baseLayer: getBaseTileLayer(\n                    getBaseRasterTileService(platform, 'explore.satellite.day', features, language),\n                    engineType,\n                    minZoom,\n                    maxZoom\n                ),\n            };\n        }\n        case MAP_TYPE_TERRAIN: {\n            return {\n                baseLayer: getBaseTileLayer(\n                    getBaseRasterTileService(platform, 'topo.day', features, language),\n                    engineType,\n                    minZoom,\n                    maxZoom\n                ),\n            };\n        }\n        case MAP_TYPE_FLEET_STYLE: {\n            return {\n                baseLayer: getBaseTileLayer(\n                    getBaseRasterTileService(platform, 'logistics.day', features, language),\n                    ENGINE_TYPE_P2D,\n                    minZoom,\n                    maxZoom\n                ),\n            };\n        }\n        case MAP_TYPE_NIGHT: {\n            if (enableWebGL) {\n                // @ts-ignore-next-line \"setMin\" is working on \"vector.normal.mapnight\"\n                defaultLayers?.vector.normal.mapnight.setMin(minZoom);\n                // @ts-ignore-next-line \"setMax\" is working on \"vector.normal.mapnight\"\n                defaultLayers?.vector.normal.mapnight.setMax(maxZoom);\n\n                return {\n                    // @ts-ignore-next-line \"vector.normal.mapnight\" is newer than the types\n                    baseLayer: defaultLayers.vector.normal.mapnight,\n                };\n            }\n            return {\n                baseLayer: getBaseTileLayer(\n                    getBaseRasterTileService(platform, 'explore.night', features, language),\n                    engineType,\n                    minZoom,\n                    maxZoom\n                ),\n            };\n        }\n        default: {\n            // As a replacement for \"defaultLayers?.raster.normal.map\" which uses the old and deprecated\n            // H.service.MapTileService, we use the Raster Tile Service v3 instead\n            return {\n                baseLayer: getBaseTileLayer(\n                    getBaseRasterTileService(platform, 'explore.day', features, language),\n                    engineType,\n                    minZoom,\n                    maxZoom\n                ),\n            };\n        }\n    }\n};\n"],"names":["getPPI","isVectorBased","enableWebGL","baseLayer","MAP_TYPE_TERRAIN","MAP_TYPE_FLEET_STYLE","getPlatform","credentials","getBaseTileLayer","rasterTileService","engineType","minZoom","maxZoom","rasterTileProvider","rasterTileLayer","getBaseRasterTileService","platform","style","features","lang","DEFAULT_RASTER_LAYER_FORMAT","getEngineType","baseLayerName","ENGINE_TYPE_P2D","ENGINE_TYPE_HARP","getBaseLayer","defaultLayers","language","vehicleRestrictions","MAP_TYPE_DEFAULT","MAP_TYPE_SATELLITE","hybridStyleConfig","layers","MAP_TYPE_NIGHT"],"mappings":"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"}
+{"version":3,"file":"rendering.js","sources":["../../../../src/components/map/utils/rendering.ts"],"sourcesContent":["import {\n    DEFAULT_RASTER_LAYER_FORMAT,\n    MAP_TYPE_FLEET_STYLE,\n    MAP_TYPE_TERRAIN,\n    ENGINE_TYPE_P2D,\n    ENGINE_TYPE_HARP,\n    MAP_TYPE_DEFAULT,\n    MAP_TYPE_NIGHT,\n    MAP_TYPE_SATELLITE,\n} from '../components/constants';\nimport type { MapCredentials, MapType } from './mapTypes';\n\n// https://www.here.com/docs/bundle/raster-tile-api-migration-guide/page/README.html#6-pixels-per-inch-ppi\n// Note: higher PPI image tiles result in larger label size and show more label on the map\n// HERE Raster Tile API v3: 100, 200, 200 or 400, 400\nexport const getPPI = () => (window.devicePixelRatio >= 1.7 ? 200 : 100);\n\n// Even if webgl is enabled, some base layer cannot be rendered in HARP properly\nexport const isVectorBased = (enableWebGL: boolean, baseLayer: MapType) =>\n    enableWebGL && baseLayer !== MAP_TYPE_TERRAIN && baseLayer !== MAP_TYPE_FLEET_STYLE;\n\n// See Migration guide: https://developer.here.com/documentation/maps/3.1.37.0/dev_guide/topics/migration.html\nexport const getPlatform = (credentials: MapCredentials) =>\n    // Initiate and authenticate your connection to the HERE platform:\n    new H.service.Platform({\n        apikey: credentials.apikey ?? '',\n        useHTTPS: location.protocol === 'https:',\n    });\n\nexport const getBaseTileLayer = <T>(\n    rasterTileService: T,\n    engineType: H.Map.EngineType,\n    minZoom: number,\n    maxZoom: number\n) => {\n    // @ts-expect-error-next-line \"H.service.rasterTile\" is newer that the types\n    const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService, {\n        engineType,\n        tileSize: 512,\n    });\n\n    const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider);\n\n    // force the tile layer minimum zoom (furthest away possible) and maximum zoom (nearest) to the desired level\n    rasterTileLayer.setMin(minZoom);\n    rasterTileLayer.setMax(maxZoom);\n\n    return rasterTileLayer;\n};\n\nexport const getBaseRasterTileService = (\n    platform: H.service.Platform,\n    style: string,\n    features: string,\n    lang: string\n) => {\n    // @ts-expect-error-next-line \"getRasterTileService\" is newer that the types\n    return platform?.getRasterTileService({\n        format: DEFAULT_RASTER_LAYER_FORMAT,\n        queryParams: {\n            // https://www.here.com/docs/bundle/raster-tile-api-migration-guide/page/README.html#5-language\n            lang,\n            ppi: getPPI(),\n            style,\n            features,\n        },\n    });\n};\n\nexport const getEngineType = (baseLayerName: string, enableWebGL: boolean) => {\n    switch (baseLayerName) {\n        case MAP_TYPE_FLEET_STYLE:\n        case MAP_TYPE_TERRAIN:\n            return ENGINE_TYPE_P2D;\n        default:\n            return enableWebGL ? ENGINE_TYPE_HARP : ENGINE_TYPE_P2D;\n    }\n};\n\nexport type BaseLayer = {\n    baseLayerName: string;\n    defaultLayers: H.service.DefaultLayers;\n    enableWebGL: boolean;\n    platform: H.service.Platform;\n    engineType: H.Map.EngineType;\n    language: string;\n    vehicleRestrictions: boolean;\n    minZoom: number;\n    maxZoom: number;\n};\n\nexport type BaseLayerResponse = { baseLayer: H.map.layer.Layer; overlayLayer?: H.map.layer.Layer };\n\nexport const getBaseLayer = async ({\n    baseLayerName,\n    defaultLayers,\n    enableWebGL,\n    platform,\n    engineType,\n    language,\n    minZoom,\n    maxZoom,\n}: BaseLayer): Promise<BaseLayerResponse> => {\n    const restriction = 'disabled'; // vehicleRestrictions ? 'active_and_inactive' : 'disabled';\n    const features = `pois:all,environmental_zones:all,congestion_zones:all,vehicle_restrictions:${restriction}`;\n\n    if (enableWebGL && baseLayerName === MAP_TYPE_DEFAULT) {\n        defaultLayers?.vector.normal.map.setMin(minZoom);\n        defaultLayers?.vector.normal.map.setMax(maxZoom);\n\n        return {\n            baseLayer: defaultLayers?.vector.normal.map,\n        };\n    }\n    switch (baseLayerName) {\n        case MAP_TYPE_SATELLITE: {\n            if (enableWebGL) {\n                // This is a workaround for setting the min and max zoom limit for satellite map\n                // since the setMin/setMax cannot be set on the \"defaultLayers.hybrid.liteday.raster\".\n                // The HERE support suggested to create a hybrid layer for that and set the zoom limits\n                // on the two layers.\n                const hybridStyleConfig = {\n                    base: {\n                        style: 'oslo',\n                        scheme: 'hybrid.day',\n                    },\n                };\n\n                // This method creates hybrid map layers. A hybrid map consists of raster satellite base layer and vector layers on top.\n                // Layers created by this method can be used only when the Map is instantiated with H.Map.EngineType.HARP engineType.\n                // See https://www.here.com/docs/bundle/maps-api-for-javascript-api-reference/page/H.service.Platform_4.html#createHybridLayers\n                // @ts-expect-error-next-line\n                await platform.createHybridLayers(\n                    hybridStyleConfig,\n                    // biome-ignore lint/suspicious/noExplicitAny: whatever layer type\n                    (layers: any) => {\n                        layers.raster.setMin(minZoom);\n                        layers.raster.setMax(maxZoom);\n\n                        layers.vector.setMin(minZoom);\n                        layers.vector.setMax(maxZoom);\n\n                        return {\n                            baseLayer: layers.raster,\n                            overlayLayer: layers.vector,\n                        };\n                    },\n                    console.error\n                );\n            }\n            return {\n                baseLayer: getBaseTileLayer(\n                    getBaseRasterTileService(platform, 'explore.satellite.day', features, language),\n                    engineType,\n                    minZoom,\n                    maxZoom\n                ),\n            };\n        }\n        case MAP_TYPE_TERRAIN: {\n            return {\n                baseLayer: getBaseTileLayer(\n                    getBaseRasterTileService(platform, 'topo.day', features, language),\n                    engineType,\n                    minZoom,\n                    maxZoom\n                ),\n            };\n        }\n        case MAP_TYPE_FLEET_STYLE: {\n            return {\n                baseLayer: getBaseTileLayer(\n                    getBaseRasterTileService(platform, 'logistics.day', features, language),\n                    ENGINE_TYPE_P2D,\n                    minZoom,\n                    maxZoom\n                ),\n            };\n        }\n        case MAP_TYPE_NIGHT: {\n            if (enableWebGL) {\n                // @ts-expect-error-next-line \"setMin\" is working on \"vector.normal.mapnight\"\n                defaultLayers?.vector.normal.mapnight.setMin(minZoom);\n                // @ts-expect-error-next-line \"setMax\" is working on \"vector.normal.mapnight\"\n                defaultLayers?.vector.normal.mapnight.setMax(maxZoom);\n\n                return {\n                    // @ts-expect-error-next-line \"vector.normal.mapnight\" is newer than the types\n                    baseLayer: defaultLayers.vector.normal.mapnight,\n                };\n            }\n            return {\n                baseLayer: getBaseTileLayer(\n                    getBaseRasterTileService(platform, 'explore.night', features, language),\n                    engineType,\n                    minZoom,\n                    maxZoom\n                ),\n            };\n        }\n        default: {\n            // As a replacement for \"defaultLayers?.raster.normal.map\" which uses the old and deprecated\n            // H.service.MapTileService, we use the Raster Tile Service v3 instead\n            return {\n                baseLayer: getBaseTileLayer(\n                    getBaseRasterTileService(platform, 'explore.day', features, language),\n                    engineType,\n                    minZoom,\n                    maxZoom\n                ),\n            };\n        }\n    }\n};\n"],"names":["getPPI","isVectorBased","enableWebGL","baseLayer","MAP_TYPE_TERRAIN","MAP_TYPE_FLEET_STYLE","getPlatform","credentials","getBaseTileLayer","rasterTileService","engineType","minZoom","maxZoom","rasterTileProvider","rasterTileLayer","getBaseRasterTileService","platform","style","features","lang","DEFAULT_RASTER_LAYER_FORMAT","getEngineType","baseLayerName","ENGINE_TYPE_P2D","ENGINE_TYPE_HARP","getBaseLayer","defaultLayers","language","MAP_TYPE_DEFAULT","MAP_TYPE_SATELLITE","hybridStyleConfig","layers","MAP_TYPE_NIGHT"],"mappings":"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"}

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":";;;;;;;;;;AA+JA,MAAMA,IAAiB,CAACC,MAAkD;AACtE,QAAM;AAAA,IACF,MAAMC;AAAA,IACN,aAAAC,IAAc;AAAA,IACd,cAAAC,IAAe;AAAA,IACf,SAAAC,IAAUC,EAAQ;AAAA,IAClB,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,cAAAC;AAAA,IACA,UAAAC,IAAW,MAAM;AAAA,IAAC;AAAA,IAClB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,EAAA,IACAZ,GAIE,CAACa,GAAMC,CAAO,IAAIC,GAAoBd,GAAWC,GAAaQ,CAAQ,GAEtEM,IAAgBC,GAAe,EAAE,GAEjCC,IAAUC,GAAA,GAEV,EAAE,SAAAC,GAAS,QAAAC,GAAQ,SAAAC,EAAA,IACrB,OAAOV,KAAa,aAAaW,EAAM,SAAS,KAAKX,CAAe,EAAE,QAAS,CAAA,GAM7EY,IAAqB,CACvBC,GACAC,GACAC,MACC;AACD,UAAM,CAACC,CAAK,IAAIF,GACVG,IAASD,EAAM,eAEfE,IAAUF,EAAM;AAEtB,KAAK,CAACE,KAAWA,MAAYD,MAAW,CAACA,EAAO,SAASC,CAAO,KAC5DL,EAAQ,GAAGC,CAAI;AAAA,EAEvB,GAEMK,IAAa,MAAM;AAIrB,QAHAb,EAAQ,MAAA,GACRF,EAAc,UAAU,QAEpBV,MAAU,KAAM,OAAOA,KAAU,YAAY,CAACA,GAAO,MAAO;AAC5D,MAAAQ,EAAQ,EAAI;AACZ;AAAA,IACJ;AAEA,IAAAI,EAAQ;AAAA,MACJ,MAAM;AACF,QAAIF,EAAc,YAAY,UAC1BF,EAAQ,EAAI;AAAA,MAEpB;AAAA,MACA,OAAOR,KAAU,WAAWA,IAAQA,GAAO;AAAA,IAAA;AAAA,EAEnD,GAEM0B,IAAa,MAAM;AAIrB,QAHAd,EAAQ,MAAA,GACRF,EAAc,UAAU,QAEpB,OAAOV,KAAU,YAAY,CAACA,GAAO,MAAM;AAC3C,MAAAQ,EAAQ,EAAK;AACb;AAAA,IACJ;AAEA,IAAAI,EAAQ,IAAI,MAAM;AACd,MAAIF,EAAc,YAAY,UAC1BF,EAAQ,EAAK;AAAA,IAErB,GAAGR,GAAO,IAAI;AAAA,EAClB,GAEM2B,IAAcC;AAAA,IAChB,IAAIR,MAAoB;AACpB,MAAAK,EAAA,GACAX,IAAU,GAAGM,CAAI;AAAA,IACrB;AAAA,IACA,CAACK,GAAYX,CAAO;AAAA,EAAA,GAGlBe,IAAaD;AAAA,IACf,IAAIR,MAAoB;AACpB,MAAAM,EAAA,GACAX,IAAS,GAAGK,CAAI;AAAA,IACpB;AAAA,IACA,CAACM,GAAYX,CAAM;AAAA,EAAA,GAGjBe,IAAcF;AAAA,IAChB,IAAIR,MAAoB;AACpB,MAAAZ,EAAQ,CAACD,CAAI,GACbS,IAAU,GAAGI,CAAI;AAAA,IACrB;AAAA,IACA,CAACJ,GAASR,GAASD,CAAI;AAAA,EAAA,GAGrBwB,IAAkBH;AAAA,IACpB,IAAIR,MAA2C;AAC3C,MAAAF,EAAmBO,GAAYL,CAAmB;AAAA,IACtD;AAAA,IACA,CAACK,CAAU;AAAA,EAAA,GAGTO,IAAiBJ;AAAA,IACnB,IAAIR,MAA2C;AAC3C,MAAAF,EAAmBQ,GAAYN,CAAiB;AAAA,IACpD;AAAA,IACA,CAACM,CAAU;AAAA,EAAA,GAGT,CAACO,GAAaC,CAAc,IAAIC,EAAmC,IAAI,GACvE,CAACC,GAAeC,CAAgB,IAAIF,EAAgC,IAAI,GACxE,CAACG,GAAcC,CAAe,IAAIJ,EAAgC,IAAI,GAEtE,CAACK,GAAgBC,CAAiB,IAAIN,EAASjC,CAAS,GAExDwC,IAAqBd;AAAA,IACvB,CAACN,MAAmC;AAChC,YAAMqB,IAAiBV,GAAa,SAASX,EAAM,MAAc,GAC3DsB,IAAkBR,GAAe,SAASd,EAAM,MAAc;AAIpE,MAAIf,KAAQF,KAAa,CAACsC,KAAkB,CAACC,KACzClB,EAAA;AAAA,IAER;AAAA,IACA,CAACO,GAAaG,GAAe/B,GAAWqB,CAAU;AAAA,EAAA;AAGtD,EAAAmB,GAAuBZ,GAAaS,CAAkB;AAEtD,QAAMI,IAA6B;AAAA,IAC/B,KAAKC,GAAU,CAAEzC,EAAiB,KAAK4B,CAAc,CAAC;AAAA,EAAA;AAG1D,EAAIpC,MAAY,UACZgD,EAAa,UAAUhB,IAChBhC,MAAY,WACnBgD,EAAa,UAAUnB,GACvBmB,EAAa,SAASjB,KACf/B,MAAY,YACnBgD,EAAa,cAAcf,GAC3Be,EAAa,aAAad;AAG9B,QAAMgB,IAAsB;AAAA,IACxB,WAAA9C;AAAA,IACA,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,SAASoC;AAAA,QAAA;AAAA,MACb;AAAA,MAEJ;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,oBAAoB,CAAC,SAAS,QAAQ,KAAK;AAAA,QAAA;AAAA,MAC/C;AAAA,IACJ;AAAA,EACJ;AAGJ,MAAInC,GAAc;AACd,IAAAA,EAAa,YAAYD;AAGzB,UAAM+C,IAAyC,CAAA;AAC/C,IAAA9C,EAAa,WAAW,IAAI,CAAC+C,MACrBA,EAAI,SAAS,UACND,EAAiB,KAAKC,CAAG,IAE7BD,EAAiB,KAAK;AAAA,MACzB,GAAGC;AAAA,MACH,SAAS;AAAA,QACL,GAAGA,EAAI;AAAA,QACP,SAASZ;AAAA,MAAA;AAAA,IACb,CACH,CACJ,GAEDnC,EAAa,YAAY8C;AAAA,EAC7B;AAEA,QAAME,IAASC,GAAUnB,GAAaG,GAAejC,KAAgB6C,CAAmB;AAIxF,EAAAK,GAAU,MAAM;AACZ,IAAIF,EAAO,SAEPV,EAAkBU,EAAO,MAAM,SAAS;AAAA,EAEhD,GAAG,CAACA,EAAO,OAAO,SAAS,CAAC;AAE5B,QAAMG,IAAiBrC,EAAM,aAAahB,GAAS;AAAA,IAC/C,GAAGkD,EAAO,WAAW;AAAA,IACrB,KAAKd;AAAA,IACL,WAAWG;AAAA,IACX,OAAO,EAAE,GAAGW,EAAO,OAAO,OAAA;AAAA,IAC1B,YAAY;AAAA,MACR,GAAGA,EAAO,WAAW;AAAA,MACrB,OAAOA,EAAO,OAAO;AAAA,MACrB,KAAKZ;AAAA,IAAA;AAAA,EACT,CACH;AAED,SACI,gBAAAgB,EAAAC,GAAA,EACK,UAAA;AAAA,IAAAjD,MAASV,IAAe4D,GAAS,aAAaH,GAAgB,SAAS,IAAI,IAAIA;AAAA,IAC/ErC,EAAM,aAAaX,GAAiBwC,CAAY;AAAA,EAAA,GACrD;AAER;AAEArD,EAAe,gBAAgBM,EAAQ;AACvCN,EAAe,gBAAgBM,EAAQ;AACvCN,EAAe,gBAAgBM,EAAQ;AAGvCN,EAAe,aAAaiE,EAAU;AACtCjE,EAAe,OAAOiE,EAAU;AAChCjE,EAAe,WAAWiE,EAAU;AACpCjE,EAAe,YAAYiE,EAAU;AACrCjE,EAAe,MAAMiE,EAAU;AAC/BjE,EAAe,UAAUiE,EAAU;AACnCjE,EAAe,cAAciE,EAAU;AACvCjE,EAAe,QAAQiE,EAAU;AACjCjE,EAAe,YAAYiE,EAAU;AACrCjE,EAAe,eAAeiE,EAAU;AACxCjE,EAAe,SAASiE,EAAU;AAClCjE,EAAe,aAAaiE,EAAU;AACtCjE,EAAe,aAAaiE,EAAU;AACtCjE,EAAe,OAAOiE,EAAU;AAChCjE,EAAe,WAAWiE,EAAU;"}

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
      */