@rio-cloud/rio-uikit 1.5.3 → 1.6.0

package/OnboardingDialog.d.ts

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

package/OnboardingDialog.js

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

package/components/assetTree/AssetTree.js

@@ -26,9 +26,7 @@ const getCurrentCategoryElement = (children, currentCategoryId) => {
 };
 const renderTreesOffscreen = (children, categoryId) => {
     return React.Children.map(children, child => {
-        const offscreenClasses = classNames('TreeOffscreenWrapper', 'flex-1-1', // stretch to use 100 percent of the remaining space
-        'flex flex-column', // set this one to flex as well, so children can use flex grow to use remaining space
-        child && child.props.id !== categoryId && 'position-offscreen pointer-events-none');
+        const offscreenClasses = classNames('TreeOffscreenWrapper', child && child.props.id !== categoryId && 'position-offscreen pointer-events-none');
         return _jsx("div", Object.assign({ className: offscreenClasses }, { children: child }));
     });
 };

package/components/assetTree/Tree.d.ts

@@ -157,6 +157,7 @@ export type TreeProps = {
      * @default false
      */
     hideTreeHead?: boolean;
+    treeHeaderContent?: React.ReactElement;
     /**
      * Defines the max-height of the scrollable list.
      */

package/components/assetTree/Tree.js

@@ -38,7 +38,7 @@ const filterProps = omit([
 ]);
 const customCompare = (prevProps, nextProps) => isEqual(filterProps(prevProps), filterProps(nextProps));
 const Tree = React.memo((props) => {
-    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false } = props, remainingProps = __rest(props, ["groups", "items", "selectedGroups", "selectedItems", "onSelectionChange", "hasMultiselect", "showRadioButtons", "hideSearch", "hideTreeHead", "summary", "hideSummary", "search", "searchPlaceholder", "onSearchChange", "className", "scrollHeight", "expandedGroups", "onExpandGroupsChange", "showEmptyGroups", "treeOptions", "treeOptionsTooltip", "disableAnimation"]);
+    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, treeHeaderContent, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false } = props, remainingProps = __rest(props, ["groups", "items", "selectedGroups", "selectedItems", "onSelectionChange", "hasMultiselect", "showRadioButtons", "hideSearch", "hideTreeHead", "treeHeaderContent", "summary", "hideSummary", "search", "searchPlaceholder", "onSearchChange", "className", "scrollHeight", "expandedGroups", "onExpandGroupsChange", "showEmptyGroups", "treeOptions", "treeOptionsTooltip", "disableAnimation"]);
     const [state, dispatch] = useReducer(treeReducer, {
         groupedItems: [],
         flatItems: [],
@@ -273,7 +273,7 @@ const Tree = React.memo((props) => {
     const showSearch = !hideSearch;
     const showSummary = !hideSummary;
     const hasCustomSearch = !isNil(search);
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: treeClassNames, ref: treeRef }, { children: [_jsxs("div", Object.assign({ className: 'TreeHeader' }, { children: [showSearch && !hasCustomSearch && (_jsx(TreeSearch, { value: state.searchValue, onChange: handleSearchChange, placeholder: searchPlaceholder })), hasCustomSearch && search, showTreeHead && (_jsxs("div", Object.assign({ className: treeHeadClasses }, { children: [showSelectAll && (_jsx("div", Object.assign({ className: 'border border-right-only hidden-empty padding-right-10 margin-right-2' }, { children: _jsx(TreeSelectAll, { isChecked: state.allChecked, isEnabled: hasMultiselect, isIndeterminate: isIndeterminate, onSelect: handleSelectAll }) }))), _jsx("div", Object.assign({ className: 'display-flex justify-content-between align-items-start width-100pct' }, { children: showSummary
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: treeClassNames, ref: treeRef }, { children: [_jsxs("div", Object.assign({ className: 'TreeHeader' }, { children: [treeHeaderContent, showSearch && !hasCustomSearch && (_jsx(TreeSearch, { value: state.searchValue, onChange: handleSearchChange, placeholder: searchPlaceholder })), hasCustomSearch && search, showTreeHead && (_jsxs("div", Object.assign({ className: treeHeadClasses }, { children: [showSelectAll && (_jsx("div", Object.assign({ className: 'border border-right-only hidden-empty padding-right-10 margin-right-2' }, { children: _jsx(TreeSelectAll, { isChecked: state.allChecked, isEnabled: hasMultiselect, isIndeterminate: isIndeterminate, onSelect: handleSelectAll }) }))), _jsx("div", Object.assign({ className: 'display-flex justify-content-between align-items-start width-100pct' }, { children: showSummary
                                     ? summary || (_jsx(TreeSummary, { children: map((typeCounter) => (_jsx(TypeCounter, { type: typeCounter, icon: `${typeCounter}`, value: state.assetCounts[typeCounter], onClick: handleFilterByType, isActive: state.typeFilter.includes(typeCounter), hasFilter: isFilterActive, enableActivity: enableActivity }, typeCounter)))(state.visibleTypeCounters) }))
                                     : null })), _jsx(TreeOptions, { treeOptions: treeOptions, treeOptionsTooltip: treeOptionsTooltip })] })))] })), _jsx(TreeRoot, Object.assign({ maxHeight: scrollHeight, disableAnimation: disableAnimation }, { children: content }))] })));
 }, customCompare);

package/components/dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import React, { type PropsWithChildren } from 'react';
-export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullscreen';
+export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullheight-lg' | 'fullheight-xl' | 'fullscreen';
 export type BaseDialogProps = {
     /**
      * Opens the dialog when set to `true`.
@@ -30,7 +30,7 @@ export type BaseDialogProps = {
      *
      * By default, the dialog has a medium size, and thus it can be omitted.
      *
-     * Possible values are: `xs`, `sm`, `lg` `xl` `fullwidth` `fullheight` `fullscreen`
+     * Possible values are: `xs`, `sm`, `lg` `xl` `fullwidth` `fullheight` 'fullheight-lg' 'fullheight-xl' `fullscreen`
      *
      * @default 'md'
      */
@@ -109,6 +109,8 @@ declare const Dialog: {
     SIZE_FULL: "full";
     SIZE_FULL_WIDTH: "fullwidth";
     SIZE_FULL_HEIGHT: "fullheight";
+    SIZE_FULL_HEIGHT_LG: "fullheight-lg";
+    SIZE_FULL_HEIGHT_XL: "fullheight-xl";
     SIZE_FULL_SCREEN: "fullscreen";
 };
 export default Dialog;

package/components/dialog/Dialog.js

@@ -85,7 +85,7 @@ const Dialog = (props) => {
     const modalClasses = classNames('modal', 'show', className);
     const isSmallestDialog = bsSize === 'xs';
     const hasChildren = !!children;
-    const modalDialogClasses = classNames(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === 'xs' && 'modal-xs', bsSize === 'sm' && 'modal-sm', bsSize === 'lg' && 'modal-lg', bsSize === 'xl' && 'modal-xl', bsSize === 'full' && 'modal-full-width', bsSize === 'fullwidth' && 'modal-full-width', bsSize === 'fullheight' && 'modal-full-height', bsSize === 'fullscreen' && 'modal-fullscreen');
+    const modalDialogClasses = classNames(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === 'xs' && 'modal-xs', bsSize === 'sm' && 'modal-sm', bsSize === 'lg' && 'modal-lg', bsSize === 'xl' && 'modal-xl', bsSize === 'full' && 'modal-full-width', bsSize === 'fullwidth' && 'modal-full-width', bsSize === 'fullheight' && 'modal-full-height', bsSize === 'fullheight-lg' && 'modal-full-height modal-lg', bsSize === 'fullheight-xl' && 'modal-full-height modal-xl', bsSize === 'fullscreen' && 'modal-fullscreen');
     const spring = {
         type: 'spring',
         damping: 33,
@@ -124,5 +124,7 @@ Dialog.SIZE_XL = 'xl';
 Dialog.SIZE_FULL = 'full';
 Dialog.SIZE_FULL_WIDTH = 'fullwidth';
 Dialog.SIZE_FULL_HEIGHT = 'fullheight';
+Dialog.SIZE_FULL_HEIGHT_LG = 'fullheight-lg';
+Dialog.SIZE_FULL_HEIGHT_XL = 'fullheight-xl';
 Dialog.SIZE_FULL_SCREEN = 'fullscreen';
 export default Dialog;

package/components/dialog/OnboardingDialog.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { type BaseDialogProps } from './Dialog';
+export type OnboardingDialogProps = Pick<BaseDialogProps, 'show' | 'onClose' | 'className'> & {
+    /**
+     * The source URL of the image to be displayed in the dialog.
+     */
+    imageSrc: string;
+    /**
+     * Alternative text for the image, used for accessibility.
+     */
+    imageAlt?: string;
+    /**
+     * The title of the dialog. A welcome message.
+     */
+    title?: string | React.ReactNode;
+    /**
+     * A short description of the service and it's onboarding.
+     */
+    description?: string | React.ReactNode;
+    /**
+     * Hint text for restarting the onboarding process.
+     */
+    onboardingRestartHint?: string | React.ReactNode;
+    /**
+     * Detailed description for restarting the onboarding process.
+     */
+    onboardingRestartDescription?: string | React.ReactNode;
+    /**
+     * Text for the skip button
+     */
+    skipButtonText?: string | React.ReactNode;
+    /**
+     * Text for the button to start the tour
+     */
+    tourButtonText?: string | React.ReactNode;
+    /**
+     * Callback function to be called when the tour starts.
+     *
+     * @returns
+     */
+    onStartTour: () => void;
+};
+declare const OnboardingDialog: (props: OnboardingDialogProps) => import("react/jsx-runtime").JSX.Element;
+export default OnboardingDialog;

package/components/dialog/OnboardingDialog.js

@@ -0,0 +1,12 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import Dialog from './Dialog';
+import Button from '../button/Button';
+const OnboardingDialog = (props) => {
+    const { className, show, onClose, onStartTour, imageSrc, imageAlt, title = 'Welcome to the RIO UIKIT!', description = (_jsxs("span", { children: [_jsx("span", Object.assign({ className: 'text-medium' }, { children: "Get started with a quick tour to explore UIKIT and discover its key features." })), ' ', _jsx("span", { children: "It's the easiest way to get familiar with the service and make the most of your experience." })] })), onboardingRestartHint = 'Not ready to start now?', onboardingRestartDescription = 'You can always start the onboarding tour later from the service info option in the application header.', skipButtonText = 'Skip', tourButtonText = 'Start the tour' } = props, remainingProps = __rest(props, ["className", "show", "onClose", "onStartTour", "imageSrc", "imageAlt", "title", "description", "onboardingRestartHint", "onboardingRestartDescription", "skipButtonText", "tourButtonText"]);
+    const dialogClassName = `${className ? className : ''} onboarding-dialog`;
+    return (_jsx(Dialog, Object.assign({}, remainingProps, { show: show, bsSize: 'sm', onClose: onClose, onEsc: onClose, bodyClassName: 'padding-0', className: dialogClassName, showCloseButton: false, body: _jsxs("div", { children: [_jsx("div", { children: _jsx("img", { className: 'img-responsive rounded-top-right-extra-large rounded-top-left-extra-large', src: imageSrc, alt: imageAlt }) }), _jsxs("div", Object.assign({ className: 'position-relative padding-20 margin-top-10 margin-x-20' }, { children: [_jsx("div", Object.assign({ className: 'margin-bottom-15 margin-right-20 text-color-darkest' }, { children: _jsx("div", Object.assign({ className: 'text-size-h3 text-medium' }, { children: title })) })), _jsx("div", Object.assign({ className: 'text-color-darker' }, { children: _jsx("p", Object.assign({ className: 'text-size-16' }, { children: description })) })), _jsxs("div", Object.assign({ className: 'text-color-darker' }, { children: [_jsx("div", Object.assign({ className: 'margin-top-25 text-medium' }, { children: onboardingRestartHint })), _jsx("p", Object.assign({ className: 'text-color-darker padding-bottom-15 margin-top-5' }, { children: onboardingRestartDescription }))] })), _jsxs("div", Object.assign({ className: 'btn-toolbar justify-content-end margin-y-20' }, { children: [_jsx(Button, Object.assign({ bsStyle: Button.MUTED, onClick: onClose }, { children: skipButtonText })), _jsx(Button, Object.assign({ bsStyle: Button.PRIMARY, onClick: onStartTour }, { children: tourButtonText }))] }))] }))] }) })));
+};
+export default OnboardingDialog;

package/components/dialog/SplitDialog.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type BaseDialogProps } from './Dialog';
-export type SplitDialogProps = BaseDialogProps & {
+export type SplitDialogProps = Omit<BaseDialogProps, 'useOverflow'> & {
     /**
      * The content to be shown on the left side.
      */
@@ -31,6 +31,12 @@ export type SplitDialogProps = BaseDialogProps & {
      * If the function returns `false`, the dialog will not be closed
      */
     onCloseValidation?: () => boolean;
+    /**
+     * Enables the modal body to overflow and use inline scrolling if needed.
+     *
+     * @default true
+     */
+    useOverflow?: boolean;
 };
 declare const SplitDialog: (props: SplitDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default SplitDialog;

package/components/onboarding/OnboardingTip.d.ts

@@ -60,6 +60,7 @@ export type OnboardingTipProps = {
      * Defines whether to have a clickflow journey.
      *
      * @default false
+     * @deprecated Please use the "useOnboardingTour" hook instead.
      */
     clickflow?: boolean;
     /**

package/components/onboarding/OnboardingTip.js

@@ -10,6 +10,7 @@ import { TEXT_ALIGNMENT } from '../../values/TextAlignment';
 import { PLACEMENT } from '../../values/Placement';
 const OnboardingTip = (props) => {
     const { id, show = false, placement = PLACEMENT.BOTTOM, title, content, onHide = noop, children, textAlignment = TEXT_ALIGNMENT.LEFT, useInDialog = false, showCloseIcon = true, clickflow = false, previousButton, nextButton, className = '', width, preventOverflow = true, popperConfig, } = props;
+    // DEPRECATED in favor of driver.js - see useOnboardingTour hook
     const clickFlowWithButtons = (_jsxs("div", Object.assign({ className: 'display-flex flex-column gap-25' }, { children: [_jsx("div", { children: content }), _jsxs("div", Object.assign({ className: `btn-toolbar justify-content-between ${showCloseIcon ? 'margin-right--25' : ''}` }, { children: [previousButton ? (_jsxs("div", Object.assign({ className: 'position-relative' }, { children: [_jsx("div", { className: 'bg-black opacity-10 rounded display-absolute inset-0' }), _jsxs(Button, Object.assign({ bsStyle: Button.SECONDARY, variant: Button.VARIANT_OUTLINE, className: 'border-none text-color-white', onClick: previousButton.onClick }, { children: [previousButton.iconName && (_jsx("span", { className: `rioglyph ${previousButton.iconName} text-color-white` })), _jsx("span", { children: previousButton.text })] }))] }))) : (_jsx("div", {})), nextButton ? (_jsxs(Button, Object.assign({ bsStyle: Button.SECONDARY, variant: Button.VARIANT_OUTLINE, className: 'border-color-white text-color-white', onClick: nextButton.onClick, iconRight: true }, { children: [_jsx("span", { children: nextButton.text }), nextButton.iconName && _jsx("span", { className: `rioglyph ${nextButton.iconName} text-color-white` })] }))) : (_jsx("div", {}))] }))] })));
     const tooltipWrapperClasses = classNames(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow');
     const overlay = (_jsx(Tooltip, Object.assign({ className: tooltipWrapperClasses, tooltipStyle: Tooltip.STYLE_ONBOARDING, id: id, onClick: onHide, width: width, textAlignment: textAlignment, allowOnTouch: true }, { children: _jsxs("div", Object.assign({ className: 'display-flex' }, { children: [_jsxs("div", Object.assign({ className: 'display-flex flex-column flex-1-1' }, { children: [title && _jsx("div", Object.assign({ className: 'tooltip-title' }, { children: title })), content && _jsx("div", Object.assign({ className: 'tooltip-content' }, { children: clickflow ? clickFlowWithButtons : content }))] })), showCloseIcon && _jsx("span", { className: 'tooltip-close rioglyph rioglyph-remove' })] })) })));

package/components/selects/Multiselect.js

@@ -27,7 +27,12 @@ const Multiselect = (props) => {
     const [keyboardUsed, setKeyboardUsed] = useState(false);
     const refToggle = useRef(null);
     const refMultiSelectWrapper = useRef(null);
-    const ref = useClickOutside(() => closeMenu());
+    const ref = useClickOutside(event => {
+        // Check if the click is truly outside the multiselect wrapper
+        if (refMultiSelectWrapper.current && !refMultiSelectWrapper.current.contains(event.target)) {
+            closeMenu();
+        }
+    });
     const mergedSelectRefs = useMergeRefs(refMultiSelectWrapper, ref);
     const updateSelectedItems = (optionsToCheck, selectedItem) => {
         if (selectedItem) {
@@ -61,7 +66,7 @@ const Multiselect = (props) => {
     const updateDOMValues = (updatedItemDOMValues = []) => {
         setItemDOMValues(updatedItemDOMValues);
     };
-    const renderFilter = () => (_jsx(MultiselectToggleFilter, { isActive: isFilterActive || !!filterValue, selectedItemIds: selectedItemIds, filterValue: filterValue, onFilterChange: handleFilterChange, multiline: multiline }));
+    const renderFilter = () => (_jsx(MultiselectToggleFilter, { isActive: isFilterActive || !!filterValue, selectedItemIds: selectedItemIds, filterValue: filterValue, onFilterChange: handleFilterChange }));
     const renderSelection = () => {
         if (counterMessage || renderCounterMessage) {
             return (_jsx(MultiselectToggleCounter, { selectedAmount: selectedItemIds.length, counterMessage: counterMessage, customRenderer: renderCounterMessage }));
@@ -89,12 +94,18 @@ const Multiselect = (props) => {
         event.preventDefault();
         const targetFilterValue = event.currentTarget.value;
         const optionsFiltered = filterOptions(itemDOMValues, targetFilterValue, options);
-        // highlight the first item of the search result if at least one item was found
+        if (!isOpen) {
+            // Ensure dropdown stays open when filtering
+            setIsOpen(true);
+        }
         const newFocusedItemIndex = optionsFiltered.length > 0 ? 0 : -1;
         setIsFilterActive(true);
         setFilterValue(targetFilterValue);
         setFilteredOptions(optionsFiltered);
-        setKeyboardUsed(true);
+        if (optionsFiltered.length > 0) {
+            // Only set keyboard used if there are filtered options
+            setKeyboardUsed(true);
+        }
         setFocusedItemIndex(newFocusedItemIndex);
     };
     const onOptionChange = (currentSelectedItem) => {
@@ -103,6 +114,7 @@ const Multiselect = (props) => {
             return;
         }
         const updatedSelectedItems = currentSelectedItem ? updateSelection(currentSelectedItem.id) : selectedItemIds;
+        // Reset everything after an option was selected. Remove the filter again.
         setSelectedItemIds(updatedSelectedItems);
         setIsFilterActive(false);
         setFilterValue('');
@@ -157,7 +169,7 @@ const Multiselect = (props) => {
         // type submit by default in HTML. In order to differentiate between real click and a synthetic event
         // caused by they keyboard, use the event details. A synthetic event is always 0.
         const isKeyboardUsed = event.detail === 0;
-        setIsOpen(!isOpen);
+        setIsOpen(prevValue => !prevValue);
         setKeyboardUsed(isKeyboardUsed);
     };
     const closeMenu = () => {
@@ -165,6 +177,9 @@ const Multiselect = (props) => {
         if (isOpen) {
             setIsOpen(false);
             setIsFilterActive(false);
+            setFilterValue('');
+            setFilteredOptions(options);
+            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);
             setKeyboardUsed(false);
             (_a = refToggle === null || refToggle === void 0 ? void 0 : refToggle.current) === null || _a === void 0 ? void 0 : _a.focus();
         }

package/components/selects/MultiselectToggleFilter.d.ts

@@ -3,7 +3,6 @@ export type MultiselectToggleFilterProps = {
     isActive: boolean;
     selectedItemIds?: string[];
     filterValue: string;
-    multiline: boolean;
     onFilterChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 declare const MultiselectToggleFilter: (props: MultiselectToggleFilterProps) => import("react/jsx-runtime").JSX.Element;

package/components/selects/MultiselectToggleFilter.js

@@ -4,10 +4,10 @@ import 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/fp/isEmpty';
 const MultiselectToggleFilter = (props) => {
-    const { isActive, selectedItemIds, filterValue, multiline, onFilterChange } = props;
+    const { isActive, selectedItemIds, filterValue, onFilterChange } = props;
     const inputClasses = classNames('multiselect-filter-input', isEmpty(selectedItemIds) && 'multiselect-filter-input-placeholder', isActive && 'multiselect-filter-input-active');
     return (_jsx("input", { type: 'text', role: 'searchbox', className: inputClasses, 
         // biome-ignore lint/a11y/noAutofocus: autofocus is intentionally set to allow instant typing to filter
-        autoFocus: true, onChange: onFilterChange, defaultValue: filterValue }));
+        autoFocus: true, onChange: onFilterChange, value: filterValue }));
 };
 export default MultiselectToggleFilter;

package/hooks/useOnboarding.d.ts

@@ -0,0 +1,128 @@
+import { type PopoverDOM as DriverPopoverDOM, type State as DriverState, type AllowedButtons } from 'driver.js';
+import 'driver.js/dist/driver.css';
+export type PopoverDOM = DriverPopoverDOM;
+export type OnboardingState = DriverState;
+export type OnboardingStep = {
+    element?: string | Element;
+    onHighlightStarted?: (element: Element | undefined, step: OnboardingStep, opts: any) => void;
+    onHighlighted?: (element: Element | undefined, step: OnboardingStep, opts: any) => void;
+    onDeselected?: (element: Element | undefined, step: OnboardingStep, opts: any) => void;
+    popover?: {
+        title?: string;
+        description?: string;
+        side?: 'top' | 'right' | 'bottom' | 'left' | 'over';
+        align?: 'start' | 'center' | 'end';
+        showButtons?: ('next' | 'previous' | 'close')[];
+        disableButtons?: ('next' | 'previous' | 'close')[];
+        popoverClass?: string;
+        doneBtnText?: string;
+        nextBtnText?: string;
+        prevBtnText?: string;
+    };
+};
+type OnboardingOptions = {
+    /**
+     *  Array of steps to highlight. You should pass this when you want to setup a product tour.
+     */
+    steps?: OnboardingStep[];
+    /**
+     * Text for the previous button in the onboarding popover.
+     */
+    prevBtnText?: string;
+    /**
+     * Text for the next button in the onboarding popover.
+     */
+    nextBtnText?: string;
+    /**
+     * Text for the done button in the onboarding popover.
+     */
+    doneBtnText?: string;
+    /**
+     * Indicates whether to show progress in the onboarding popover.
+     *
+     * @default true
+     */
+    showProgress?: boolean;
+    /**
+     * Whether to allow closing the popover by clicking on the backdrop.
+     * This should be disabled during the tour to ensure th user completes the tour.
+     * But can be enabled on the last step.
+     *
+     * @default false
+     */
+    allowClose?: boolean;
+    /**
+     * Distance between the highlighted element and the cutout.
+     *
+     * @default 10
+     */
+    stagePadding?: number;
+    /**
+     * Radius of the cutout around the highlighted element.
+     *
+     * @default 5
+     */
+    stageRadius?: number;
+    /**
+     * Whether to allow keyboard navigation.
+     *
+     * @default true
+     */
+    allowKeyboardControl?: boolean;
+    /**
+     * Array of buttons to show in the popover. Defaults to ["next", "previous", "close"]
+     * for product tours and [] for single element highlighting.
+     */
+    showButtons?: AllowedButtons[];
+    /**
+     * Array of buttons to disable. This is useful when you want to show some of the buttons, but disable some of them.
+     */
+    disableButtons?: AllowedButtons[];
+    /**
+     * Option to disable the backdrop. Note, the backdrop element is still there but with 100% opacity
+     * and the close on the backdrop is disabled.
+     *
+     * @default false
+     */
+    noBackdrop?: boolean;
+    /**
+     * Additional classes set on the popover itself.
+     */
+    popoverClass?: string;
+    /**
+     * Callback triggered when the onboarding popover renders.
+     *
+     * @param popover
+     * @param state
+     * @returns
+     */
+    onPopoverRender?: (popover: PopoverDOM, state: OnboardingState) => void;
+};
+export declare const useOnboardingTour: (params: OnboardingOptions) => {
+    run: () => void;
+    destroy: () => void;
+    onboardingState: () => DriverState;
+    refresh: () => void;
+    isActive: () => boolean;
+    moveNext: () => void;
+    movePrevious: () => void;
+    moveTo: (stepNumber: number) => void;
+    hasNextStep: () => false | import("driver.js").DriveStep;
+    hasPreviousStep: () => false | import("driver.js").DriveStep;
+    isFirstStep: () => boolean;
+    isLastStep: () => boolean;
+    getActiveIndex: () => number | undefined;
+};
+type OnboardingTipOptions = {
+    allowClose?: boolean;
+    stagePadding?: number;
+    stageRadius?: number;
+    noBackdrop?: boolean;
+};
+export declare const useOnboardingTip: (options?: OnboardingTipOptions) => {
+    highlight: (step: OnboardingStep) => void;
+    destroy: () => void;
+    refresh: () => void;
+    isActive: () => boolean;
+};
+export {};

package/hooks/useOnboarding.js

@@ -0,0 +1,75 @@
+import { driver, } from 'driver.js';
+import 'driver.js/dist/driver.css';
+export const useOnboardingTour = (params) => {
+    const { steps, prevBtnText = 'Previous', nextBtnText = 'Next', doneBtnText = 'Done', showProgress = true, allowClose = false, stagePadding = 10, stageRadius = 5, allowKeyboardControl = true, showButtons, disableButtons, popoverClass, noBackdrop = false, onPopoverRender = () => { }, } = params;
+    const handlePopoverRender = (popover, options) => {
+        onPopoverRender(popover, options.state);
+    };
+    const isSingleStep = !steps || steps.length === 1;
+    // This configuration is applied to all steps.
+    // Driver.js allows also for individual customization for single steps too.
+    const driverInstance = driver({
+        steps,
+        prevBtnText,
+        nextBtnText,
+        doneBtnText,
+        showProgress: isSingleStep ? false : showProgress,
+        showButtons: isSingleStep ? ['close'] : showButtons,
+        allowClose,
+        overlayOpacity: noBackdrop ? 0 : 0.5,
+        disableButtons,
+        progressText: '{{current}} / {{total}}',
+        overlayColor: 'var(--color-black)',
+        stagePadding,
+        stageRadius,
+        allowKeyboardControl,
+        popoverClass,
+        onPopoverRender: handlePopoverRender,
+    });
+    return {
+        // Use for onboarding tours. Pass in all steps as "steps" parameter for initial configuration.
+        run: () => driverInstance.drive(),
+        // Use for single element highlights -> see useOnboardingTip
+        // highlight: (step: OnboardingStep) => driverInstance.highlight(step),
+        // Cleanup the onboarding
+        destroy: () => driverInstance.destroy(),
+        // Gets the current state of the onboarding with the current step
+        onboardingState: () => driverInstance.getState(),
+        // Recalculate and redraw the highlight
+        refresh: () => driverInstance.refresh(),
+        // Is the tour or highlight currently active
+        isActive: () => driverInstance.isActive(),
+        // Move to the next step
+        moveNext: () => driverInstance.moveNext(),
+        // Move to the previous step
+        movePrevious: () => driverInstance.movePrevious(),
+        // Move to the step 4
+        moveTo: (stepNumber) => driverInstance.moveTo(stepNumber),
+        // Is there a next step
+        hasNextStep: () => driverInstance.hasNextStep(),
+        // Is there a previous step
+        hasPreviousStep: () => driverInstance.hasPreviousStep(),
+        // Is the current step the first step
+        isFirstStep: () => driverInstance.isFirstStep(),
+        // Is the current step the last step
+        isLastStep: () => driverInstance.isLastStep(),
+        // Gets the active step index
+        getActiveIndex: () => driverInstance.getActiveIndex(),
+    };
+};
+export const useOnboardingTip = (options) => {
+    const { allowClose = true, stagePadding = 0, stageRadius = 5, noBackdrop = true } = options || {};
+    const driverInstance = driver({
+        allowClose,
+        stagePadding,
+        stageRadius,
+        overlayOpacity: noBackdrop ? 0 : 0.5,
+        overlayColor: undefined,
+    });
+    return {
+        highlight: (step) => driverInstance.highlight(step),
+        destroy: () => driverInstance.destroy(),
+        refresh: () => driverInstance.refresh(),
+        isActive: () => driverInstance.isActive(),
+    };
+};

package/lib/es/Onboarding.d.ts

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

package/lib/es/Onboarding.js

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

package/lib/es/OnboardingDialog.d.ts

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

package/lib/es/OnboardingDialog.js

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

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

@@ -28,9 +28,7 @@ const getCurrentCategoryElement = (children, currentCategoryId) => {
 };
 const renderTreesOffscreen = (children, categoryId) => {
     return react_1.default.Children.map(children, child => {
-        const offscreenClasses = (0, classnames_1.default)('TreeOffscreenWrapper', 'flex-1-1', // stretch to use 100 percent of the remaining space
-        'flex flex-column', // set this one to flex as well, so children can use flex grow to use remaining space
-        child && child.props.id !== categoryId && 'position-offscreen pointer-events-none');
+        const offscreenClasses = (0, classnames_1.default)('TreeOffscreenWrapper', child && child.props.id !== categoryId && 'position-offscreen pointer-events-none');
         return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: offscreenClasses }, { children: child }));
     });
 };

package/lib/es/components/assetTree/Tree.d.ts

@@ -157,6 +157,7 @@ export type TreeProps = {
      * @default false
      */
     hideTreeHead?: boolean;
+    treeHeaderContent?: React.ReactElement;
     /**
      * Defines the max-height of the scrollable list.
      */

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

@@ -43,7 +43,7 @@ const filterProps = (0, omit_1.default)([
 ]);
 const customCompare = (prevProps, nextProps) => (0, isEqual_1.default)(filterProps(prevProps), filterProps(nextProps));
 const Tree = react_1.default.memo((props) => {
-    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop_1.default, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop_1.default, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop_1.default, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false } = props, remainingProps = tslib_1.__rest(props, ["groups", "items", "selectedGroups", "selectedItems", "onSelectionChange", "hasMultiselect", "showRadioButtons", "hideSearch", "hideTreeHead", "summary", "hideSummary", "search", "searchPlaceholder", "onSearchChange", "className", "scrollHeight", "expandedGroups", "onExpandGroupsChange", "showEmptyGroups", "treeOptions", "treeOptionsTooltip", "disableAnimation"]);
+    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop_1.default, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, treeHeaderContent, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop_1.default, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop_1.default, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false } = props, remainingProps = tslib_1.__rest(props, ["groups", "items", "selectedGroups", "selectedItems", "onSelectionChange", "hasMultiselect", "showRadioButtons", "hideSearch", "hideTreeHead", "treeHeaderContent", "summary", "hideSummary", "search", "searchPlaceholder", "onSearchChange", "className", "scrollHeight", "expandedGroups", "onExpandGroupsChange", "showEmptyGroups", "treeOptions", "treeOptionsTooltip", "disableAnimation"]);
     const [state, dispatch] = (0, react_1.useReducer)(treeReducer_1.treeReducer, {
         groupedItems: [],
         flatItems: [],
@@ -278,7 +278,7 @@ const Tree = react_1.default.memo((props) => {
     const showSearch = !hideSearch;
     const showSummary = !hideSummary;
     const hasCustomSearch = !(0, isNil_1.default)(search);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: treeClassNames, ref: treeRef }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'TreeHeader' }, { children: [showSearch && !hasCustomSearch && ((0, jsx_runtime_1.jsx)(TreeSearch_1.default, { value: state.searchValue, onChange: handleSearchChange, placeholder: searchPlaceholder })), hasCustomSearch && search, showTreeHead && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: treeHeadClasses }, { children: [showSelectAll && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'border border-right-only hidden-empty padding-right-10 margin-right-2' }, { children: (0, jsx_runtime_1.jsx)(TreeSelectAll_1.default, { isChecked: state.allChecked, isEnabled: hasMultiselect, isIndeterminate: isIndeterminate, onSelect: handleSelectAll }) }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'display-flex justify-content-between align-items-start width-100pct' }, { children: showSummary
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: treeClassNames, ref: treeRef }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'TreeHeader' }, { children: [treeHeaderContent, showSearch && !hasCustomSearch && ((0, jsx_runtime_1.jsx)(TreeSearch_1.default, { value: state.searchValue, onChange: handleSearchChange, placeholder: searchPlaceholder })), hasCustomSearch && search, showTreeHead && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: treeHeadClasses }, { children: [showSelectAll && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'border border-right-only hidden-empty padding-right-10 margin-right-2' }, { children: (0, jsx_runtime_1.jsx)(TreeSelectAll_1.default, { isChecked: state.allChecked, isEnabled: hasMultiselect, isIndeterminate: isIndeterminate, onSelect: handleSelectAll }) }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'display-flex justify-content-between align-items-start width-100pct' }, { children: showSummary
                                     ? summary || ((0, jsx_runtime_1.jsx)(TreeSummary_1.default, { children: (0, map_1.default)((typeCounter) => ((0, jsx_runtime_1.jsx)(TypeCounter_1.default, { type: typeCounter, icon: `${typeCounter}`, value: state.assetCounts[typeCounter], onClick: handleFilterByType, isActive: state.typeFilter.includes(typeCounter), hasFilter: isFilterActive, enableActivity: enableActivity }, typeCounter)))(state.visibleTypeCounters) }))
                                     : null })), (0, jsx_runtime_1.jsx)(TreeOptions_1.default, { treeOptions: treeOptions, treeOptionsTooltip: treeOptionsTooltip })] })))] })), (0, jsx_runtime_1.jsx)(TreeRoot_1.default, Object.assign({ maxHeight: scrollHeight, disableAnimation: disableAnimation }, { children: content }))] })));
 }, customCompare);

package/lib/es/components/dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import React, { type PropsWithChildren } from 'react';
-export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullscreen';
+export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullheight-lg' | 'fullheight-xl' | 'fullscreen';
 export type BaseDialogProps = {
     /**
      * Opens the dialog when set to `true`.
@@ -30,7 +30,7 @@ export type BaseDialogProps = {
      *
      * By default, the dialog has a medium size, and thus it can be omitted.
      *
-     * Possible values are: `xs`, `sm`, `lg` `xl` `fullwidth` `fullheight` `fullscreen`
+     * Possible values are: `xs`, `sm`, `lg` `xl` `fullwidth` `fullheight` 'fullheight-lg' 'fullheight-xl' `fullscreen`
      *
      * @default 'md'
      */
@@ -109,6 +109,8 @@ declare const Dialog: {
     SIZE_FULL: "full";
     SIZE_FULL_WIDTH: "fullwidth";
     SIZE_FULL_HEIGHT: "fullheight";
+    SIZE_FULL_HEIGHT_LG: "fullheight-lg";
+    SIZE_FULL_HEIGHT_XL: "fullheight-xl";
     SIZE_FULL_SCREEN: "fullscreen";
 };
 export default Dialog;

package/lib/es/components/dialog/Dialog.js

@@ -87,7 +87,7 @@ const Dialog = (props) => {
     const modalClasses = (0, classnames_1.default)('modal', 'show', className);
     const isSmallestDialog = bsSize === 'xs';
     const hasChildren = !!children;
-    const modalDialogClasses = (0, classnames_1.default)(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === 'xs' && 'modal-xs', bsSize === 'sm' && 'modal-sm', bsSize === 'lg' && 'modal-lg', bsSize === 'xl' && 'modal-xl', bsSize === 'full' && 'modal-full-width', bsSize === 'fullwidth' && 'modal-full-width', bsSize === 'fullheight' && 'modal-full-height', bsSize === 'fullscreen' && 'modal-fullscreen');
+    const modalDialogClasses = (0, classnames_1.default)(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === 'xs' && 'modal-xs', bsSize === 'sm' && 'modal-sm', bsSize === 'lg' && 'modal-lg', bsSize === 'xl' && 'modal-xl', bsSize === 'full' && 'modal-full-width', bsSize === 'fullwidth' && 'modal-full-width', bsSize === 'fullheight' && 'modal-full-height', bsSize === 'fullheight-lg' && 'modal-full-height modal-lg', bsSize === 'fullheight-xl' && 'modal-full-height modal-xl', bsSize === 'fullscreen' && 'modal-fullscreen');
     const spring = {
         type: 'spring',
         damping: 33,
@@ -126,5 +126,7 @@ Dialog.SIZE_XL = 'xl';
 Dialog.SIZE_FULL = 'full';
 Dialog.SIZE_FULL_WIDTH = 'fullwidth';
 Dialog.SIZE_FULL_HEIGHT = 'fullheight';
+Dialog.SIZE_FULL_HEIGHT_LG = 'fullheight-lg';
+Dialog.SIZE_FULL_HEIGHT_XL = 'fullheight-xl';
 Dialog.SIZE_FULL_SCREEN = 'fullscreen';
 exports.default = Dialog;

package/lib/es/components/dialog/OnboardingDialog.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { type BaseDialogProps } from './Dialog';
+export type OnboardingDialogProps = Pick<BaseDialogProps, 'show' | 'onClose' | 'className'> & {
+    /**
+     * The source URL of the image to be displayed in the dialog.
+     */
+    imageSrc: string;
+    /**
+     * Alternative text for the image, used for accessibility.
+     */
+    imageAlt?: string;
+    /**
+     * The title of the dialog. A welcome message.
+     */
+    title?: string | React.ReactNode;
+    /**
+     * A short description of the service and it's onboarding.
+     */
+    description?: string | React.ReactNode;
+    /**
+     * Hint text for restarting the onboarding process.
+     */
+    onboardingRestartHint?: string | React.ReactNode;
+    /**
+     * Detailed description for restarting the onboarding process.
+     */
+    onboardingRestartDescription?: string | React.ReactNode;
+    /**
+     * Text for the skip button
+     */
+    skipButtonText?: string | React.ReactNode;
+    /**
+     * Text for the button to start the tour
+     */
+    tourButtonText?: string | React.ReactNode;
+    /**
+     * Callback function to be called when the tour starts.
+     *
+     * @returns
+     */
+    onStartTour: () => void;
+};
+declare const OnboardingDialog: (props: OnboardingDialogProps) => import("react/jsx-runtime").JSX.Element;
+export default OnboardingDialog;

package/lib/es/components/dialog/OnboardingDialog.js

@@ -0,0 +1,14 @@
+"use strict";
+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 Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
+const OnboardingDialog = (props) => {
+    const { className, show, onClose, onStartTour, imageSrc, imageAlt, title = 'Welcome to the RIO UIKIT!', description = ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-medium' }, { children: "Get started with a quick tour to explore UIKIT and discover its key features." })), ' ', (0, jsx_runtime_1.jsx)("span", { children: "It's the easiest way to get familiar with the service and make the most of your experience." })] })), onboardingRestartHint = 'Not ready to start now?', onboardingRestartDescription = 'You can always start the onboarding tour later from the service info option in the application header.', skipButtonText = 'Skip', tourButtonText = 'Start the tour' } = props, remainingProps = tslib_1.__rest(props, ["className", "show", "onClose", "onStartTour", "imageSrc", "imageAlt", "title", "description", "onboardingRestartHint", "onboardingRestartDescription", "skipButtonText", "tourButtonText"]);
+    const dialogClassName = `${className ? className : ''} onboarding-dialog`;
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { show: show, bsSize: 'sm', onClose: onClose, onEsc: onClose, bodyClassName: 'padding-0', className: dialogClassName, showCloseButton: false, body: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("img", { className: 'img-responsive rounded-top-right-extra-large rounded-top-left-extra-large', src: imageSrc, alt: imageAlt }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'position-relative padding-20 margin-top-10 margin-x-20' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'margin-bottom-15 margin-right-20 text-color-darkest' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-size-h3 text-medium' }, { children: title })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-color-darker' }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: 'text-size-16' }, { children: description })) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'text-color-darker' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'margin-top-25 text-medium' }, { children: onboardingRestartHint })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: 'text-color-darker padding-bottom-15 margin-top-5' }, { children: onboardingRestartDescription }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'btn-toolbar justify-content-end margin-y-20' }, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: Button_1.default.MUTED, onClick: onClose }, { children: skipButtonText })), (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: Button_1.default.PRIMARY, onClick: onStartTour }, { children: tourButtonText }))] }))] }))] }) })));
+};
+exports.default = OnboardingDialog;

package/lib/es/components/dialog/SplitDialog.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type BaseDialogProps } from './Dialog';
-export type SplitDialogProps = BaseDialogProps & {
+export type SplitDialogProps = Omit<BaseDialogProps, 'useOverflow'> & {
     /**
      * The content to be shown on the left side.
      */
@@ -31,6 +31,12 @@ export type SplitDialogProps = BaseDialogProps & {
      * If the function returns `false`, the dialog will not be closed
      */
     onCloseValidation?: () => boolean;
+    /**
+     * Enables the modal body to overflow and use inline scrolling if needed.
+     *
+     * @default true
+     */
+    useOverflow?: boolean;
 };
 declare const SplitDialog: (props: SplitDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default SplitDialog;

package/lib/es/components/onboarding/OnboardingTip.d.ts

@@ -60,6 +60,7 @@ export type OnboardingTipProps = {
      * Defines whether to have a clickflow journey.
      *
      * @default false
+     * @deprecated Please use the "useOnboardingTour" hook instead.
      */
     clickflow?: boolean;
     /**

package/lib/es/components/onboarding/OnboardingTip.js

@@ -13,6 +13,7 @@ const TextAlignment_1 = require("../../values/TextAlignment");
 const Placement_1 = require("../../values/Placement");
 const OnboardingTip = (props) => {
     const { id, show = false, placement = Placement_1.PLACEMENT.BOTTOM, title, content, onHide = noop_1.default, children, textAlignment = TextAlignment_1.TEXT_ALIGNMENT.LEFT, useInDialog = false, showCloseIcon = true, clickflow = false, previousButton, nextButton, className = '', width, preventOverflow = true, popperConfig, } = props;
+    // DEPRECATED in favor of driver.js - see useOnboardingTour hook
     const clickFlowWithButtons = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex flex-column gap-25' }, { children: [(0, jsx_runtime_1.jsx)("div", { children: content }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `btn-toolbar justify-content-between ${showCloseIcon ? 'margin-right--25' : ''}` }, { children: [previousButton ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'position-relative' }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'bg-black opacity-10 rounded display-absolute inset-0' }), (0, jsx_runtime_1.jsxs)(Button_1.default, Object.assign({ bsStyle: Button_1.default.SECONDARY, variant: Button_1.default.VARIANT_OUTLINE, className: 'border-none text-color-white', onClick: previousButton.onClick }, { children: [previousButton.iconName && ((0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${previousButton.iconName} text-color-white` })), (0, jsx_runtime_1.jsx)("span", { children: previousButton.text })] }))] }))) : ((0, jsx_runtime_1.jsx)("div", {})), nextButton ? ((0, jsx_runtime_1.jsxs)(Button_1.default, Object.assign({ bsStyle: Button_1.default.SECONDARY, variant: Button_1.default.VARIANT_OUTLINE, className: 'border-color-white text-color-white', onClick: nextButton.onClick, iconRight: true }, { children: [(0, jsx_runtime_1.jsx)("span", { children: nextButton.text }), nextButton.iconName && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${nextButton.iconName} text-color-white` })] }))) : ((0, jsx_runtime_1.jsx)("div", {}))] }))] })));
     const tooltipWrapperClasses = (0, classnames_1.default)(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow');
     const overlay = ((0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ className: tooltipWrapperClasses, tooltipStyle: Tooltip_1.default.STYLE_ONBOARDING, id: id, onClick: onHide, width: width, textAlignment: textAlignment, allowOnTouch: true }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex flex-column flex-1-1' }, { children: [title && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tooltip-title' }, { children: title })), content && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tooltip-content' }, { children: clickflow ? clickFlowWithButtons : content }))] })), showCloseIcon && (0, jsx_runtime_1.jsx)("span", { className: 'tooltip-close rioglyph rioglyph-remove' })] })) })));

package/lib/es/components/selects/Multiselect.js

@@ -29,7 +29,12 @@ const Multiselect = (props) => {
     const [keyboardUsed, setKeyboardUsed] = (0, react_1.useState)(false);
     const refToggle = (0, react_1.useRef)(null);
     const refMultiSelectWrapper = (0, react_1.useRef)(null);
-    const ref = (0, useClickOutside_1.default)(() => closeMenu());
+    const ref = (0, useClickOutside_1.default)(event => {
+        // Check if the click is truly outside the multiselect wrapper
+        if (refMultiSelectWrapper.current && !refMultiSelectWrapper.current.contains(event.target)) {
+            closeMenu();
+        }
+    });
     const mergedSelectRefs = (0, useMergeRefs_1.default)(refMultiSelectWrapper, ref);
     const updateSelectedItems = (optionsToCheck, selectedItem) => {
         if (selectedItem) {
@@ -63,7 +68,7 @@ const Multiselect = (props) => {
     const updateDOMValues = (updatedItemDOMValues = []) => {
         setItemDOMValues(updatedItemDOMValues);
     };
-    const renderFilter = () => ((0, jsx_runtime_1.jsx)(MultiselectToggleFilter_1.default, { isActive: isFilterActive || !!filterValue, selectedItemIds: selectedItemIds, filterValue: filterValue, onFilterChange: handleFilterChange, multiline: multiline }));
+    const renderFilter = () => ((0, jsx_runtime_1.jsx)(MultiselectToggleFilter_1.default, { isActive: isFilterActive || !!filterValue, selectedItemIds: selectedItemIds, filterValue: filterValue, onFilterChange: handleFilterChange }));
     const renderSelection = () => {
         if (counterMessage || renderCounterMessage) {
             return ((0, jsx_runtime_1.jsx)(MultiselectToggleCounter_1.default, { selectedAmount: selectedItemIds.length, counterMessage: counterMessage, customRenderer: renderCounterMessage }));
@@ -91,12 +96,18 @@ const Multiselect = (props) => {
         event.preventDefault();
         const targetFilterValue = event.currentTarget.value;
         const optionsFiltered = (0, BaseSelectDropdown_1.filterOptions)(itemDOMValues, targetFilterValue, options);
-        // highlight the first item of the search result if at least one item was found
+        if (!isOpen) {
+            // Ensure dropdown stays open when filtering
+            setIsOpen(true);
+        }
         const newFocusedItemIndex = optionsFiltered.length > 0 ? 0 : -1;
         setIsFilterActive(true);
         setFilterValue(targetFilterValue);
         setFilteredOptions(optionsFiltered);
-        setKeyboardUsed(true);
+        if (optionsFiltered.length > 0) {
+            // Only set keyboard used if there are filtered options
+            setKeyboardUsed(true);
+        }
         setFocusedItemIndex(newFocusedItemIndex);
     };
     const onOptionChange = (currentSelectedItem) => {
@@ -105,6 +116,7 @@ const Multiselect = (props) => {
             return;
         }
         const updatedSelectedItems = currentSelectedItem ? updateSelection(currentSelectedItem.id) : selectedItemIds;
+        // Reset everything after an option was selected. Remove the filter again.
         setSelectedItemIds(updatedSelectedItems);
         setIsFilterActive(false);
         setFilterValue('');
@@ -159,7 +171,7 @@ const Multiselect = (props) => {
         // type submit by default in HTML. In order to differentiate between real click and a synthetic event
         // caused by they keyboard, use the event details. A synthetic event is always 0.
         const isKeyboardUsed = event.detail === 0;
-        setIsOpen(!isOpen);
+        setIsOpen(prevValue => !prevValue);
         setKeyboardUsed(isKeyboardUsed);
     };
     const closeMenu = () => {
@@ -167,6 +179,9 @@ const Multiselect = (props) => {
         if (isOpen) {
             setIsOpen(false);
             setIsFilterActive(false);
+            setFilterValue('');
+            setFilteredOptions(options);
+            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);
             setKeyboardUsed(false);
             (_a = refToggle === null || refToggle === void 0 ? void 0 : refToggle.current) === null || _a === void 0 ? void 0 : _a.focus();
         }

package/lib/es/components/selects/MultiselectToggleFilter.d.ts

@@ -3,7 +3,6 @@ export type MultiselectToggleFilterProps = {
     isActive: boolean;
     selectedItemIds?: string[];
     filterValue: string;
-    multiline: boolean;
     onFilterChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 declare const MultiselectToggleFilter: (props: MultiselectToggleFilterProps) => import("react/jsx-runtime").JSX.Element;

package/lib/es/components/selects/MultiselectToggleFilter.js

@@ -7,10 +7,10 @@ require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const MultiselectToggleFilter = (props) => {
-    const { isActive, selectedItemIds, filterValue, multiline, onFilterChange } = props;
+    const { isActive, selectedItemIds, filterValue, onFilterChange } = props;
     const inputClasses = (0, classnames_1.default)('multiselect-filter-input', (0, isEmpty_1.default)(selectedItemIds) && 'multiselect-filter-input-placeholder', isActive && 'multiselect-filter-input-active');
     return ((0, jsx_runtime_1.jsx)("input", { type: 'text', role: 'searchbox', className: inputClasses, 
         // biome-ignore lint/a11y/noAutofocus: autofocus is intentionally set to allow instant typing to filter
-        autoFocus: true, onChange: onFilterChange, defaultValue: filterValue }));
+        autoFocus: true, onChange: onFilterChange, value: filterValue }));
 };
 exports.default = MultiselectToggleFilter;

package/lib/es/hooks/useOnboarding.d.ts

@@ -0,0 +1,128 @@
+import { type PopoverDOM as DriverPopoverDOM, type State as DriverState, type AllowedButtons } from 'driver.js';
+import 'driver.js/dist/driver.css';
+export type PopoverDOM = DriverPopoverDOM;
+export type OnboardingState = DriverState;
+export type OnboardingStep = {
+    element?: string | Element;
+    onHighlightStarted?: (element: Element | undefined, step: OnboardingStep, opts: any) => void;
+    onHighlighted?: (element: Element | undefined, step: OnboardingStep, opts: any) => void;
+    onDeselected?: (element: Element | undefined, step: OnboardingStep, opts: any) => void;
+    popover?: {
+        title?: string;
+        description?: string;
+        side?: 'top' | 'right' | 'bottom' | 'left' | 'over';
+        align?: 'start' | 'center' | 'end';
+        showButtons?: ('next' | 'previous' | 'close')[];
+        disableButtons?: ('next' | 'previous' | 'close')[];
+        popoverClass?: string;
+        doneBtnText?: string;
+        nextBtnText?: string;
+        prevBtnText?: string;
+    };
+};
+type OnboardingOptions = {
+    /**
+     *  Array of steps to highlight. You should pass this when you want to setup a product tour.
+     */
+    steps?: OnboardingStep[];
+    /**
+     * Text for the previous button in the onboarding popover.
+     */
+    prevBtnText?: string;
+    /**
+     * Text for the next button in the onboarding popover.
+     */
+    nextBtnText?: string;
+    /**
+     * Text for the done button in the onboarding popover.
+     */
+    doneBtnText?: string;
+    /**
+     * Indicates whether to show progress in the onboarding popover.
+     *
+     * @default true
+     */
+    showProgress?: boolean;
+    /**
+     * Whether to allow closing the popover by clicking on the backdrop.
+     * This should be disabled during the tour to ensure th user completes the tour.
+     * But can be enabled on the last step.
+     *
+     * @default false
+     */
+    allowClose?: boolean;
+    /**
+     * Distance between the highlighted element and the cutout.
+     *
+     * @default 10
+     */
+    stagePadding?: number;
+    /**
+     * Radius of the cutout around the highlighted element.
+     *
+     * @default 5
+     */
+    stageRadius?: number;
+    /**
+     * Whether to allow keyboard navigation.
+     *
+     * @default true
+     */
+    allowKeyboardControl?: boolean;
+    /**
+     * Array of buttons to show in the popover. Defaults to ["next", "previous", "close"]
+     * for product tours and [] for single element highlighting.
+     */
+    showButtons?: AllowedButtons[];
+    /**
+     * Array of buttons to disable. This is useful when you want to show some of the buttons, but disable some of them.
+     */
+    disableButtons?: AllowedButtons[];
+    /**
+     * Option to disable the backdrop. Note, the backdrop element is still there but with 100% opacity
+     * and the close on the backdrop is disabled.
+     *
+     * @default false
+     */
+    noBackdrop?: boolean;
+    /**
+     * Additional classes set on the popover itself.
+     */
+    popoverClass?: string;
+    /**
+     * Callback triggered when the onboarding popover renders.
+     *
+     * @param popover
+     * @param state
+     * @returns
+     */
+    onPopoverRender?: (popover: PopoverDOM, state: OnboardingState) => void;
+};
+export declare const useOnboardingTour: (params: OnboardingOptions) => {
+    run: () => void;
+    destroy: () => void;
+    onboardingState: () => DriverState;
+    refresh: () => void;
+    isActive: () => boolean;
+    moveNext: () => void;
+    movePrevious: () => void;
+    moveTo: (stepNumber: number) => void;
+    hasNextStep: () => false | import("driver.js").DriveStep;
+    hasPreviousStep: () => false | import("driver.js").DriveStep;
+    isFirstStep: () => boolean;
+    isLastStep: () => boolean;
+    getActiveIndex: () => number | undefined;
+};
+type OnboardingTipOptions = {
+    allowClose?: boolean;
+    stagePadding?: number;
+    stageRadius?: number;
+    noBackdrop?: boolean;
+};
+export declare const useOnboardingTip: (options?: OnboardingTipOptions) => {
+    highlight: (step: OnboardingStep) => void;
+    destroy: () => void;
+    refresh: () => void;
+    isActive: () => boolean;
+};
+export {};

package/lib/es/hooks/useOnboarding.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnboardingTip = exports.useOnboardingTour = void 0;
+const driver_js_1 = require("driver.js");
+require("driver.js/dist/driver.css");
+const useOnboardingTour = (params) => {
+    const { steps, prevBtnText = 'Previous', nextBtnText = 'Next', doneBtnText = 'Done', showProgress = true, allowClose = false, stagePadding = 10, stageRadius = 5, allowKeyboardControl = true, showButtons, disableButtons, popoverClass, noBackdrop = false, onPopoverRender = () => { }, } = params;
+    const handlePopoverRender = (popover, options) => {
+        onPopoverRender(popover, options.state);
+    };
+    const isSingleStep = !steps || steps.length === 1;
+    // This configuration is applied to all steps.
+    // Driver.js allows also for individual customization for single steps too.
+    const driverInstance = (0, driver_js_1.driver)({
+        steps,
+        prevBtnText,
+        nextBtnText,
+        doneBtnText,
+        showProgress: isSingleStep ? false : showProgress,
+        showButtons: isSingleStep ? ['close'] : showButtons,
+        allowClose,
+        overlayOpacity: noBackdrop ? 0 : 0.5,
+        disableButtons,
+        progressText: '{{current}} / {{total}}',
+        overlayColor: 'var(--color-black)',
+        stagePadding,
+        stageRadius,
+        allowKeyboardControl,
+        popoverClass,
+        onPopoverRender: handlePopoverRender,
+    });
+    return {
+        // Use for onboarding tours. Pass in all steps as "steps" parameter for initial configuration.
+        run: () => driverInstance.drive(),
+        // Use for single element highlights -> see useOnboardingTip
+        // highlight: (step: OnboardingStep) => driverInstance.highlight(step),
+        // Cleanup the onboarding
+        destroy: () => driverInstance.destroy(),
+        // Gets the current state of the onboarding with the current step
+        onboardingState: () => driverInstance.getState(),
+        // Recalculate and redraw the highlight
+        refresh: () => driverInstance.refresh(),
+        // Is the tour or highlight currently active
+        isActive: () => driverInstance.isActive(),
+        // Move to the next step
+        moveNext: () => driverInstance.moveNext(),
+        // Move to the previous step
+        movePrevious: () => driverInstance.movePrevious(),
+        // Move to the step 4
+        moveTo: (stepNumber) => driverInstance.moveTo(stepNumber),
+        // Is there a next step
+        hasNextStep: () => driverInstance.hasNextStep(),
+        // Is there a previous step
+        hasPreviousStep: () => driverInstance.hasPreviousStep(),
+        // Is the current step the first step
+        isFirstStep: () => driverInstance.isFirstStep(),
+        // Is the current step the last step
+        isLastStep: () => driverInstance.isLastStep(),
+        // Gets the active step index
+        getActiveIndex: () => driverInstance.getActiveIndex(),
+    };
+};
+exports.useOnboardingTour = useOnboardingTour;
+const useOnboardingTip = (options) => {
+    const { allowClose = true, stagePadding = 0, stageRadius = 5, noBackdrop = true } = options || {};
+    const driverInstance = (0, driver_js_1.driver)({
+        allowClose,
+        stagePadding,
+        stageRadius,
+        overlayOpacity: noBackdrop ? 0 : 0.5,
+        overlayColor: undefined,
+    });
+    return {
+        highlight: (step) => driverInstance.highlight(step),
+        destroy: () => driverInstance.destroy(),
+        refresh: () => driverInstance.refresh(),
+        isActive: () => driverInstance.isActive(),
+    };
+};
+exports.useOnboardingTip = useOnboardingTip;

package/lib/es/useOnboarding.d.ts

@@ -0,0 +1 @@
+export * from './hooks/useOnboarding';

package/lib/es/useOnboarding.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./hooks/useOnboarding"), exports);

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.5.3"
+    "version": "1.6.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "1.5.3",
+    "version": "1.6.0",
     "description": "The RIO UIKIT component library",
     "repository": {
         "type": "git",
@@ -66,7 +66,7 @@
         "@vitejs/plugin-react": "4.3.1",
         "@vitest/coverage-c8": "0.33.0",
         "autoprefixer": "10.4.20",
-        "backstopjs": "6.3.23",
+        "backstopjs": "6.3.25",
         "copyfiles": "2.4.1",
         "dotenv": "16.4.5",
         "eslint": "8.55.0",
@@ -111,6 +111,7 @@
         "@formkit/auto-animate": "0.8.2",
         "@popperjs/core": "2.11.8",
         "classnames": "2.5.1",
+        "driver.js": "^1.3.1",
         "events": "3.3.0",
         "framer-motion": "4.1.17",
         "iframe-resizer-react": "1.1.0",

package/useOnboarding.d.ts

@@ -0,0 +1 @@
+export * from './hooks/useOnboarding';

package/useOnboarding.js

@@ -0,0 +1 @@
+export * from './hooks/useOnboarding';

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.5.3"
+    "version": "1.6.0"
 }