@rio-cloud/rio-uikit 1.2.2 → 1.4.0

package/components/tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, } from 'react';
+import { useEffect, useState, forwardRef, } from 'react';
 import classNames from 'classnames';
 import omit from 'lodash/fp/omit';
 import { isDesktop } from '../../utils/deviceUtils';
@@ -17,13 +17,17 @@ const TEXT_ALIGNMENT_MAP = {
 };
 const Tooltip = forwardRef((props, ref) => {
     const _a = omit(['popper', 'positionLeft', 'positionTop'], props), { allowOnTouch = false, arrowProps, children, className = '', innerClassName = '', placement = 'bottom', style, textAlignment = 'center', tooltipStyle = 'default', width = 'auto' } = _a, remainingProps = __rest(_a, ["allowOnTouch", "arrowProps", "children", "className", "innerClassName", "placement", "style", "textAlignment", "tooltipStyle", "width"]);
+    // Mount the component but don't show it yet via CSS.
+    // After it is mounted, we set the visibility class to use CSS animation
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => setIsMounted(true), []);
     if (!isDesktop() && !allowOnTouch) {
         // Workaround: we have to return a DOM node as otherwise the
         // react-transition library would throw an error on mobile
         // when triggering a browser reflow and accessing the node directly.
         return _jsx("span", { className: 'display-none' });
     }
-    const wrapperClasses = classNames('tooltip', tooltipStyle && `tooltip-${tooltipStyle}`, placement, className);
+    const wrapperClasses = classNames('tooltip', tooltipStyle && `tooltip-${tooltipStyle}`, placement, 'fade', isMounted && 'show', className);
     const innerClasses = classNames('tooltip-inner', textAlignment && `text-${textAlignment}`, width && `width-${width}`, innerClassName && innerClassName);
     /* eslint-disable react/no-unknown-property */
     return (_jsxs("div", Object.assign({}, remainingProps, { role: 'tooltip', "x-placement": placement, ref: ref, className: wrapperClasses, style: Object.assign({}, style), "data-offset": 20 }, { children: [_jsx("div", Object.assign({ className: 'tooltip-arrow' }, arrowProps)), _jsx("div", Object.assign({ className: innerClasses }, { children: children }))] })));

package/hooks/useClickOutside.d.ts

@@ -9,4 +9,5 @@ export type EventListenerType = keyof DocumentEventMap;
  * @returns A mutable ref object representing the target element.
  */
 declare const useClickOutside: <T extends HTMLElement = any>(callback: (event: MouseEvent | TouchEvent) => void, events?: EventListenerType[]) => import("react").MutableRefObject<T>;
+export declare const useClickOutsideWithRef: <T extends HTMLElement = any>(ref: React.MutableRefObject<HTMLElement | null> | HTMLElement | null, callback: (event: MouseEvent | TouchEvent) => void, events?: EventListenerType[]) => void;
 export default useClickOutside;

package/hooks/useClickOutside.js

@@ -12,10 +12,17 @@ import { useEffect, useRef } from 'react';
  */
 const useClickOutside = (callback, events = ['mousedown', 'touchstart']) => {
     const targetRef = useRef(null);
+    useClickOutsideWithRef(targetRef, callback, events);
+    return targetRef;
+};
+// Internal use for now - extend it later to be used outside
+export const useClickOutsideWithRef = (ref, callback, events = ['mousedown', 'touchstart']) => {
     useEffect(() => {
+        // In case the ref is actually a state and will be set via the state setter function
+        const element = ref && 'current' in ref ? ref.current : ref;
         // Event listener function to check if the click is outside the target element
         const listener = (event) => {
-            if (targetRef.current && !targetRef.current.contains(event.target)) {
+            if (element && !element.contains(event.target)) {
                 callback(event);
             }
         };
@@ -25,7 +32,6 @@ const useClickOutside = (callback, events = ['mousedown', 'touchstart']) => {
         return () => {
             events.forEach(eventType => document.removeEventListener(eventType, listener));
         };
-    }, [targetRef, callback, events]);
-    return targetRef;
+    }, [ref, callback, events]);
 };
 export default useClickOutside;

package/hooks/useElapsedTime.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Custom React hook to measure the elapsed time since a specified start time or the component's mount time.
+ *
+ * @param {number} [startTime=Date.now()] - The start time in milliseconds from which to measure the elapsed time.
+ * @returns {Function} A function that returns the elapsed time in milliseconds since the specified start time
+ * or the component's mount time.
+ *
+ * @example
+ * import useElapsedTime from '@rio-cloud/rio-uikit/useElapsedTime';
+ * import Button from '@rio-cloud/rio-uikit/Button';
+ *
+ * const MyComponent = () => {
+ *   const getElapsedTime = useElapsedTime();
+ *
+ *   const handleClick = () => {
+ *     const elapsedTime = getElapsedTime();
+ *     console.log(`Elapsed time: ${elapsedTime} ms`);
+ *   };
+ *
+ *   return (
+ *       <Button onClick={handleClick}>Get elapsed time</Button>
+ *   );
+ * };
+ */
+declare const useElapsedTime: (startTime?: number) => (() => number);
+export default useElapsedTime;

package/hooks/useElapsedTime.js

@@ -0,0 +1,36 @@
+import { useRef, useEffect } from 'react';
+/**
+ * Custom React hook to measure the elapsed time since a specified start time or the component's mount time.
+ *
+ * @param {number} [startTime=Date.now()] - The start time in milliseconds from which to measure the elapsed time.
+ * @returns {Function} A function that returns the elapsed time in milliseconds since the specified start time
+ * or the component's mount time.
+ *
+ * @example
+ * import useElapsedTime from '@rio-cloud/rio-uikit/useElapsedTime';
+ * import Button from '@rio-cloud/rio-uikit/Button';
+ *
+ * const MyComponent = () => {
+ *   const getElapsedTime = useElapsedTime();
+ *
+ *   const handleClick = () => {
+ *     const elapsedTime = getElapsedTime();
+ *     console.log(`Elapsed time: ${elapsedTime} ms`);
+ *   };
+ *
+ *   return (
+ *       <Button onClick={handleClick}>Get elapsed time</Button>
+ *   );
+ * };
+ */
+const useElapsedTime = (startTime = Date.now()) => {
+    const startTimeRef = useRef(startTime);
+    const getElapsedTime = () => {
+        return Date.now() - startTimeRef.current;
+    };
+    useEffect(() => {
+        startTimeRef.current = startTime;
+    }, [startTime]);
+    return getElapsedTime;
+};
+export default useElapsedTime;

package/hooks/useEvent.d.ts

@@ -14,5 +14,5 @@ type WindowEventMapWithFullscreen = {
  * @param options - Optional. An object that specifies characteristics about the event listener.
  * @param target - Optional. The target element to which to attach the event listener.
  */
-declare const useEvent: <K extends keyof WindowEventMap, W extends keyof WindowEventMapWithFullscreen, T extends HTMLElement = HTMLDivElement>(eventType: K | W, callback: EventListener, options?: boolean | AddEventListenerOptions, target?: Window | Document | T | null) => void;
+declare const useEvent: <K extends keyof WindowEventMap, W extends keyof WindowEventMapWithFullscreen, T extends HTMLElement = HTMLDivElement>(eventType: K | W, callback: EventListener, options?: boolean | AddEventListenerOptions, target?: Document | Window | T | null) => void;
 export default useEvent;

package/hooks/useKey.d.ts

@@ -2,9 +2,12 @@ type KeyboardEventType = 'keyup' | 'keydown' | 'keypress';
 /**
  * Custom hook to handle keyboard events.
  *
- * @param callback - The callback function to be executed when a keyboard event occurs.
- * @param [eventTypes=['keydown']] - The types of keyboard events to listen for.
- * @param [node=document] - The DOM node to attach the event listener to (defaults to document).
+ * @param keyOrCallback - Either a key string (e.g., 'Enter') or a callback function.
+ * @param callbackOrEventTypes - If the first argument is a key, this should be the callback function.
+ *                               If the first argument is a callback, this is an optional array of event types.
+ * @param [eventTypesOrNode=['keydown']] - If the first argument is a key, this should be an array of event types.
+ *                                         If the first argument is a callback, this is the node (defaults to document).
+ * @param [node=document] - Optional DOM node to attach the event listener to (defaults to document).
  */
-declare const useKey: (callback: (event: KeyboardEvent) => void, eventTypes?: KeyboardEventType[], node?: Document) => void;
+declare const useKey: (keyOrCallback: string | ((event: KeyboardEvent) => void), callbackOrEventTypes?: ((event: KeyboardEvent) => void | KeyboardEventType[]) | undefined, eventTypesOrNode?: KeyboardEventType[] | Document, node?: Document | HTMLElement) => void;
 export default useKey;

package/hooks/useKey.js

@@ -1,21 +1,49 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 /**
  * Custom hook to handle keyboard events.
  *
- * @param callback - The callback function to be executed when a keyboard event occurs.
- * @param [eventTypes=['keydown']] - The types of keyboard events to listen for.
- * @param [node=document] - The DOM node to attach the event listener to (defaults to document).
+ * @param keyOrCallback - Either a key string (e.g., 'Enter') or a callback function.
+ * @param callbackOrEventTypes - If the first argument is a key, this should be the callback function.
+ *                               If the first argument is a callback, this is an optional array of event types.
+ * @param [eventTypesOrNode=['keydown']] - If the first argument is a key, this should be an array of event types.
+ *                                         If the first argument is a callback, this is the node (defaults to document).
+ * @param [node=document] - Optional DOM node to attach the event listener to (defaults to document).
  */
-const useKey = (callback, eventTypes = ['keydown'], node = document) => {
+const useKey = (keyOrCallback, callbackOrEventTypes, eventTypesOrNode = ['keydown'], node = document) => {
+    const callbacksRef = useRef([]);
     useEffect(() => {
+        const isKeyMode = typeof keyOrCallback === 'string';
+        const callback = isKeyMode
+            ? callbackOrEventTypes
+            : keyOrCallback;
+        const keyHandler = (event) => {
+            if (isKeyMode) {
+                if (event.key === keyOrCallback) {
+                    callback(event);
+                }
+            }
+            else {
+                callback(event);
+            }
+        };
+        // Register the keyHandler
+        callbacksRef.current.push(keyHandler);
+        const genericHandler = (event) => {
+            for (const callBecky of callbacksRef.current) {
+                callBecky(event);
+            }
+        };
+        const eventTypes = Array.isArray(eventTypesOrNode) ? eventTypesOrNode : ['keydown'];
         for (const eventType of eventTypes) {
-            node.addEventListener(eventType, callback);
+            node.addEventListener(eventType, genericHandler);
         }
         return () => {
             for (const eventType of eventTypes) {
-                node.removeEventListener(eventType, callback);
+                node.removeEventListener(eventType, genericHandler);
             }
+            // Clean up callback reference
+            callbacksRef.current = callbacksRef.current.filter(singleCallback => singleCallback !== keyHandler);
         };
-    }, [callback]);
+    }, [keyOrCallback, callbackOrEventTypes, eventTypesOrNode, node]);
 };
 export default useKey;

package/hooks/useTimeout.d.ts

@@ -8,4 +8,9 @@ import React from 'react';
  * @returns A mutable ref object to manage the timeout ID.
  */
 declare const useTimeout: (callback: () => void, delay: number | null) => React.MutableRefObject<number | null>;
+export declare const useChainedTimeout: () => {
+    set: (fn: () => void, delayMs?: number) => void;
+    clear: () => void;
+    handleRef: React.MutableRefObject<any>;
+};
 export default useTimeout;

package/hooks/useTimeout.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 // See www.joshwcomeau.com/snippets/react-hooks/use-timeout/
 /**
  * A custom hook for handling timeout events.
@@ -31,4 +31,42 @@ const useTimeout = (callback, delay) => {
     }, [delay]);
     return timeoutRef;
 };
+export const useChainedTimeout = () => {
+    const MAX_DELAY_MS = Math.pow(2, 31) - 1;
+    const setChainedTimeout = (ref, fn, timeoutAtMs) => {
+        const delayMs = timeoutAtMs - Date.now();
+        ref.current =
+            delayMs <= MAX_DELAY_MS
+                ? setTimeout(fn, delayMs)
+                : setTimeout(() => setChainedTimeout(ref, fn, timeoutAtMs), MAX_DELAY_MS);
+    };
+    const handleRef = useRef();
+    const { set, clear } = useMemo(() => {
+        const clear = () => clearTimeout(handleRef.current);
+        const set = (fn, delayMs = 0) => {
+            clear();
+            if (delayMs <= MAX_DELAY_MS) {
+                // For simplicity, if the timeout is short, just set a normal timeout.
+                handleRef.current = setTimeout(fn, delayMs);
+            }
+            else {
+                setChainedTimeout(handleRef, fn, Date.now() + delayMs);
+            }
+        };
+        return {
+            set,
+            clear,
+        };
+    }, []);
+    useEffect(() => {
+        return () => {
+            clear();
+        };
+    }, [clear]);
+    return {
+        set,
+        clear,
+        handleRef,
+    };
+};
 export default useTimeout;

package/hooks/useUncontrollable.d.ts

@@ -0,0 +1,13 @@
+export type Handler = (value: any, ...args: any[]) => any;
+export declare function defaultKey(key: string): string;
+declare function useUncontrolledProp<TProp, THandler extends Handler = Handler>(propValue: TProp | undefined, defaultValue: TProp, handler?: THandler): readonly [TProp, THandler];
+declare function useUncontrolledProp<TProp, THandler extends Handler = Handler>(propValue: TProp | undefined, defaultValue?: TProp | undefined, handler?: THandler): readonly [TProp | undefined, (...args: Parameters<THandler>) => ReturnType<THandler> | void];
+export { useUncontrolledProp };
+type FilterFlags<Base, Condition> = {
+    [Key in keyof Base]: NonNullable<Base[Key]> extends Condition ? Key : never;
+};
+type AllowedNames<Base, Condition> = FilterFlags<Base, Condition>[keyof Base];
+type ConfigMap<TProps extends object> = {
+    [p in keyof TProps]?: AllowedNames<TProps, Function>;
+};
+export declare function useUncontrolled<TProps extends object, TDefaults extends string = never>(props: TProps, config: ConfigMap<TProps>): Omit<TProps, TDefaults>;

package/hooks/useUncontrollable.js

@@ -0,0 +1,41 @@
+import { __rest } from "tslib";
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+// forked from https://github.com/jquense/uncontrollable/blob/master/src/index.ts
+import { useCallback, useRef, useState } from 'react';
+export function defaultKey(key) {
+    return 'default' + key.charAt(0).toUpperCase() + key.substr(1);
+}
+function useUncontrolledProp(propValue, defaultValue, handler) {
+    const wasPropRef = useRef(propValue !== undefined);
+    const [stateValue, setState] = useState(defaultValue);
+    const isProp = propValue !== undefined;
+    const wasProp = wasPropRef.current;
+    wasPropRef.current = isProp;
+    /**
+     * If a prop switches from controlled to Uncontrolled
+     * reset its value to the defaultValue
+     */
+    if (!isProp && wasProp && stateValue !== defaultValue) {
+        setState(defaultValue);
+    }
+    return [
+        isProp ? propValue : stateValue,
+        useCallback((...args) => {
+            const [value, ...rest] = args;
+            const returnValue = handler === null || handler === void 0 ? void 0 : handler(value, ...rest);
+            setState(value);
+            return returnValue;
+        }, [handler]),
+    ];
+}
+export { useUncontrolledProp };
+export function useUncontrolled(props, config) {
+    return Object.keys(config).reduce((result, fieldName) => {
+        const _a = result, _b = defaultKey(fieldName), defaultValue = _a[_b], _c = fieldName, propsValue = _a[_c], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + ""]);
+        // @ts-ignore-next-line
+        const handlerName = config[fieldName];
+        // @ts-ignore-next-line
+        const [value, handler] = useUncontrolledProp(propsValue, defaultValue, props[handlerName]);
+        return Object.assign(Object.assign({}, rest), { [fieldName]: value, [handlerName]: handler });
+    }, props);
+}

package/lib/es/ChartLabel.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/charts/ChartLabel';
+export * from './components/charts/ChartLabel';

package/lib/es/ChartLabel.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var ChartLabel_1 = require("./components/charts/ChartLabel");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(ChartLabel_1).default; } });
+tslib_1.__exportStar(require("./components/charts/ChartLabel"), exports);

package/lib/es/ComposedChart.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/charts/ComposedChart';
+export * from './components/charts/ComposedChart';

package/lib/es/ComposedChart.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var ComposedChart_1 = require("./components/charts/ComposedChart");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(ComposedChart_1).default; } });
+tslib_1.__exportStar(require("./components/charts/ComposedChart"), exports);

package/lib/es/DateRangePicker.d.ts

@@ -1,12 +1,12 @@
-import type { Component, JSX, PropsWithChildren, ReactNode } from 'react';
+import type { JSX, PropsWithChildren, ReactNode } from 'react';
 import type { Moment } from 'moment/moment';
-export interface DateRangePickerCustomPresets {
+export type DateRangePickerCustomPresets = {
     startValue: Moment;
     endValue: Moment;
     text: string | JSX.Element;
     onSelect?: Function;
-}
-export interface DateRangePickerProps {
+};
+export type DateRangePickerProps = {
     startValue?: Moment;
     endValue?: Moment;
     defaultStartValue?: Moment;
@@ -34,11 +34,10 @@ export interface DateRangePickerProps {
     dropup?: boolean;
     pullRight?: boolean;
     autoDropDirection?: boolean;
-}
+};
 /**
  * Wrapper component for React-Datetime.
  *
  * @deprecated This will be removed from the UIKIT at some time.
  */
-declare const DateRangePicker: Component<PropsWithChildren<DateRangePickerProps>, {}, any>;
-export { DateRangePicker };
+export declare const DateRangePicker: (props: PropsWithChildren<DateRangePickerProps>) => import("react/jsx-runtime").JSX.Element;

package/lib/es/DateRangePicker.js

@@ -2,11 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangePicker = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const DateRangePicker_1 = tslib_1.__importDefault(require("./components/datepicker/DateRangePicker"));
 /**
  * Wrapper component for React-Datetime.
  *
  * @deprecated This will be removed from the UIKIT at some time.
  */
-const DateRangePicker = DateRangePicker_1.default;
+const DateRangePicker = (props) => {
+    const { children } = props, remainingProps = tslib_1.__rest(props, ["children"]);
+    return (0, jsx_runtime_1.jsx)(DateRangePicker_1.default, Object.assign({}, remainingProps, { children: children }));
+};
 exports.DateRangePicker = DateRangePicker;

package/lib/es/GroupedItemList.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/groupedItemList/GroupedItemList';
+export * from './components/groupedItemList/GroupedItemList';

package/lib/es/GroupedItemList.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var GroupedItemList_1 = require("./components/groupedItemList/GroupedItemList");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(GroupedItemList_1).default; } });
+tslib_1.__exportStar(require("./components/groupedItemList/GroupedItemList"), exports);

package/lib/es/LicensePlate.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/licensePlate/LicensePlate';
+export * from './components/licensePlate/LicensePlate';

package/lib/es/LicensePlate.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var LicensePlate_1 = require("./components/licensePlate/LicensePlate");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(LicensePlate_1).default; } });
+tslib_1.__exportStar(require("./components/licensePlate/LicensePlate"), exports);

package/lib/es/ReferenceLine.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/charts/ReferenceLine';
+export * from './components/charts/ReferenceLine';

package/lib/es/ReferenceLine.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var ReferenceLine_1 = require("./components/charts/ReferenceLine");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(ReferenceLine_1).default; } });
+tslib_1.__exportStar(require("./components/charts/ReferenceLine"), exports);

package/lib/es/components/actionBarItem/ActionBarItem.js

@@ -99,7 +99,7 @@ const ActionBarItemBase = (props) => {
         return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [react_1.default.cloneElement(itemIcon, { onClick: onToggle }), (0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: () => setIsShown(false) }, { children: (0, jsx_runtime_1.jsx)(Dialog_1.default, { show: isShown, onClose: () => setIsShown(false), body: itemPopover, bodyClassName: mobileDialogBodyClassName, title: title }) })), childrenWithoutPopoverAndIcon] })));
     }
     const overlay = ((0, jsx_runtime_1.jsx)(ActionBarOverlay_1.default, Object.assign({ id: id, title: title, width: popoverWidth, preRender: useOffscreen, show: isShown }, { children: itemPopover }), 'child'));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [(0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ onToggle: onToggle, show: isShown || useOffscreen, placement: OverlayTrigger_1.default.BOTTOM_END, overlay: overlay, trigger: 'click', rootClose: false, popperConfig: {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [(0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ onToggle: onToggle, show: isShown || useOffscreen, placement: OverlayTrigger_1.default.BOTTOM_END, overlay: overlay, rootClose: false, trigger: 'click', popperConfig: {
                     modifiers: [
                         {
                             name: 'offset',
@@ -107,6 +107,10 @@ const ActionBarItemBase = (props) => {
                                 offset: [0, 5],
                             },
                         },
+                        {
+                            name: 'arrow',
+                            options: {},
+                        },
                     ],
                 } }, { children: itemIcon })), childrenWithoutPopoverAndIcon] })));
 };

package/lib/es/components/actionBarItem/ActionBarItemIcon.d.ts

@@ -1,9 +1,7 @@
-import { type HTMLAttributes, type PropsWithChildren } from 'react';
-type ActionBarItemIconProps = HTMLAttributes<HTMLDivElement> & {
-    className?: string;
-};
-declare const ActionBarItemIcon: {
-    (props: PropsWithChildren<ActionBarItemIconProps>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+import React from 'react';
+declare const ActionBarItemIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    className?: string | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default ActionBarItemIcon;

package/lib/es/components/actionBarItem/ActionBarItemIcon.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore-next-line importsNotUsedAsValues
-require("react");
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const ActionBarItemIcon = (props) => {
+const ActionBarItemIcon = (0, react_1.forwardRef)((props, ref) => {
     const { className, children } = props, remainingProps = tslib_1.__rest(props, ["className", "children"]);
     const classes = (0, classnames_1.default)('ActionBarItemIcon', className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: classes }, { children: children })));
-};
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: classes, ref: ref }, { children: children })));
+});
 // The displayName is used in ActionBarItem for checking the component "isActionBarItemIcon"
 ActionBarItemIcon.displayName = 'ActionBarItemIcon';
 exports.default = ActionBarItemIcon;

package/lib/es/components/actionBarItem/ActionBarOverlay.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { type Placement } from '../../values/Placement';
+import { PLACEMENT_MAP } from '../popover/Popover';
+import type { ObjectValues } from '../../utils/ObjectValues';
 export type ActionBarOverlayWidth = 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;
 export type ActionBarOverlayProps = {
     id: string;
@@ -9,7 +10,7 @@ export type ActionBarOverlayProps = {
     width?: ActionBarOverlayWidth;
     onClick?: () => void;
     style?: object;
-    placement?: Placement;
+    placement?: ObjectValues<typeof PLACEMENT_MAP>;
     className?: string;
 };
 declare const ActionBarOverlay: React.ForwardRefExoticComponent<ActionBarOverlayProps & {

package/lib/es/components/actionBarItem/ActionBarOverlay.js

@@ -2,19 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Popover_1 = tslib_1.__importDefault(require("react-bootstrap/Popover"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const Placement_1 = require("../../values/Placement");
-const DEFAULT_PLACEMENT = Placement_1.PLACEMENT.BOTTOM;
+const Popover_1 = tslib_1.__importStar(require("../popover/Popover"));
+const DEFAULT_PLACEMENT = Popover_1.PLACEMENT_MAP.BOTTOM;
 const DEFAULT_WIDTH = 250;
 const ActionBarOverlay = (0, react_1.forwardRef)((props, ref) => {
-    const { children, show, preRender, id, title, onClick = noop_1.default, width = DEFAULT_WIDTH, style = {}, className, placement = DEFAULT_PLACEMENT } = props, rest = tslib_1.__rest(props, ["children", "show", "preRender", "id", "title", "onClick", "width", "style", "className", "placement"]);
+    const { children, show, preRender, id, title, onClick = noop_1.default, width = DEFAULT_WIDTH, style = {}, className, placement = DEFAULT_PLACEMENT } = props, remainingProps = tslib_1.__rest(props, ["children", "show", "preRender", "id", "title", "onClick", "width", "style", "className", "placement"]);
     const adjustedStyles = Object.assign(Object.assign({}, style), { width });
     const adjustedClassName = preRender && !show ? (0, classnames_1.default)(className, 'position-offscreen') : className;
-    const popoverTitleClasses = (0, classnames_1.default)('ActionBarItemPopover popover-title text-color-dark', className);
-    const popoverContentClasses = (0, classnames_1.default)('ActionBarItemPopover popover-content', className);
-    return ((0, jsx_runtime_1.jsxs)(Popover_1.default, Object.assign({ ref: ref, id: id, onClick: onClick, placement: placement }, rest, { style: adjustedStyles, className: adjustedClassName }, { children: [title && (0, jsx_runtime_1.jsx)(Popover_1.default.Title, Object.assign({ className: popoverTitleClasses }, { children: title })), (0, jsx_runtime_1.jsx)(Popover_1.default.Content, Object.assign({ className: popoverContentClasses }, { children: children }))] })));
+    const popoverTitleClasses = (0, classnames_1.default)('ActionBarItemPopover text-color-dark', className);
+    const popoverContentClasses = (0, classnames_1.default)('ActionBarItemPopover', className);
+    return ((0, jsx_runtime_1.jsxs)(Popover_1.default, Object.assign({ ref: ref, id: id, onClick: onClick, placement: placement }, remainingProps, { style: adjustedStyles, className: adjustedClassName }, { children: [title && (0, jsx_runtime_1.jsx)(Popover_1.default.Title, Object.assign({ className: popoverTitleClasses }, { children: title })), (0, jsx_runtime_1.jsx)(Popover_1.default.Content, Object.assign({ className: popoverContentClasses }, { children: children }))] })));
 });
 exports.default = ActionBarOverlay;

package/lib/es/components/applicationLayout/ApplicationLayout.js

@@ -9,6 +9,7 @@ const ApplicationLayoutHeader_1 = tslib_1.__importDefault(require("./Application
 const ApplicationLayoutSidebar_1 = tslib_1.__importDefault(require("./ApplicationLayoutSidebar"));
 const ApplicationLayoutBody_1 = tslib_1.__importDefault(require("./ApplicationLayoutBody"));
 const initDocumentBootstrapping_1 = require("../../utils/init/initDocumentBootstrapping");
+require("../../utils/init/initConfig");
 // initializes document bootstrapping - keep the import to avoid being tree-shaken
 // noinspection JSIgnoredPromiseFromCall
 (0, initDocumentBootstrapping_1.initDocumentBootstrapping)();

package/lib/es/components/applicationLayout/ApplicationLayoutHeader.js

@@ -3,14 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const ApplicationLayoutHeader = (0, react_1.forwardRef)((props, ref) => {
     const { className, children } = props, remainingProps = tslib_1.__rest(props, ["className", "children"]);
     const classes = (0, classnames_1.default)('ApplicationLayoutHeader', className);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, remainingProps, { className: classes, id: 'ApplicationLayoutHeader' }, { children: children })));
 });
-ApplicationLayoutHeader.propTypes = {
-    className: prop_types_1.default.string,
-};
 exports.default = ApplicationLayoutHeader;

package/lib/es/components/assetTree/TreeOptions.js

@@ -15,18 +15,22 @@ const TreeOptions = (props) => {
     }
     const dropdownClasses = (0, classnames_1.default)('display-flex flex-column gap-10', 'width-250', 'padding-15', className);
     const customDropdown = (0, jsx_runtime_1.jsx)("div", Object.assign({ className: dropdownClasses }, { children: treeOptions }));
-    const dropdown = ((0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, { title: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-option-vertical', "aria-hidden": 'true' }), bsStyle: 'default', bsSize: 'sm', customDropdown: customDropdown, toggleClassName: 'hover-bg-white border-none text-color-gray hover-text-color-dark', className: 'TreeHeaderOptions', pullRight: true, iconOnly: true }));
+    const dropdown = ((0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, { title: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-option-vertical', "aria-hidden": 'true' }), bsStyle: 'default', bsSize: 'sm', customDropdown: customDropdown, toggleClassName: 'hover-bg-white border-none text-color-gray hover-text-color-dark', className: 'TreeHeaderOptions height-20', pullRight: true, iconOnly: true }));
     if (treeOptionsTooltip) {
-        return ((0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, Object.assign({ content: treeOptionsTooltip, placement: 'bottom', delay: { show: 1000, hide: 0 }, popperConfig: {
+        return ((0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, Object.assign({ content: treeOptionsTooltip, placement: 'bottom-end', delay: { show: 1000, hide: 0 }, popperConfig: {
                 modifiers: [
                     {
                         name: 'offset',
                         options: {
-                            offset: [-20, 10],
+                            offset: [10, 5],
                         },
                     },
+                    {
+                        name: 'arrow',
+                        options: {},
+                    },
                 ],
-            } }, { children: dropdown })));
+            } }, { children: (0, jsx_runtime_1.jsx)("div", { children: dropdown }) })));
     }
     return dropdown;
 };

package/lib/es/components/assetTree/treeUtils.js

@@ -38,7 +38,7 @@ const orderByName = (0, orderBy_1.default)([
         var _a;
         return isNameObject(item)
             ? item.name.lastName.toLowerCase()
-            : (_a = item.name.toLowerCase()) !== null && _a !== void 0 ? _a : '';
+            : ((_a = item.name.toLowerCase()) !== null && _a !== void 0 ? _a : '');
     },
 ], ['asc']);
 // TODO: extend to use provided external search function instead?