@rio-cloud/rio-uikit 1.4.0 → 1.4.1

package/components/charts/Legend.js

@@ -1,4 +1,4 @@
-// @ts-ignore-next-line importsNotUsedAsValues
+// @ts-ignore importsNotUsedAsValues
 import 'react';
 export const getLegendDefaultProps = () => ({
     iconType: 'circle',

package/components/dropdown/ButtonDropdown.d.ts

@@ -117,5 +117,7 @@ export type ButtonDropdownProps = {
      */
     className?: string;
 };
-declare const ButtonDropdown: (props: ButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const ButtonDropdown: React.ForwardRefExoticComponent<ButtonDropdownProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
 export default ButtonDropdown;

package/components/dropdown/ButtonDropdown.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+// biome-ignore lint/style/useImportType: <explanation>
+import { useState, useEffect, forwardRef } from 'react';
 import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
 import classNames from 'classnames';
@@ -25,8 +26,8 @@ const getPlacement = (pullRight, dropup) => {
     }
     return 'bottom-start';
 };
-const ButtonDropdown = (props) => {
-    const { id = Math.random().toString(36).substr(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop, onClose = noop, onLabelButtonClick = noop, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '' } = props, remainingProps = __rest(props, ["id", "items", "bsSize", "bsStyle", "variant", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig", "toggleClassName", "dropdownClassName", "className"]);
+const ButtonDropdown = forwardRef((props, ref) => {
+    const { id = Math.random().toString(36).slice(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop, onClose = noop, onLabelButtonClick = noop, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '' } = props, remainingProps = __rest(props, ["id", "items", "bsSize", "bsStyle", "variant", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig", "toggleClassName", "dropdownClassName", "className"]);
     const [internalOpen, setInternalOpen] = useState(open);
     const [refDropdownToggle, setRefDropdownToggle] = useState(null);
     const [refDropdownMenu, setRefDropdownMenu] = useState(null);
@@ -89,6 +90,6 @@ const ButtonDropdown = (props) => {
     const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);
     const dropdownClasses = classNames(usePortal && 'dropdown-portal', splitButton && pullRight && 'pull-right', dropdownClassName);
     const dropdownMenu = (_jsx(MenuItemList, Object.assign({ className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper }, attributes.popper, { children: customDropdown ? customDropdown : _jsx(MenuItems, { items: items, closeMenu: toggleOpen }) })));
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [_jsx(DropdownToggleButton, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, className: toggleClassName }, { children: _jsxs(_Fragment, { children: [title, shouldShowCaret && _jsx(Caret, {})] }) })), splitButton && (_jsx(SplitCaretButton, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
-};
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [_jsx(DropdownToggleButton, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, outerRef: ref, className: toggleClassName }, { children: _jsxs(_Fragment, { children: [title, shouldShowCaret && _jsx(Caret, {})] }) })), splitButton && (_jsx(SplitCaretButton, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
+});
 export default ButtonDropdown;

package/components/dropdown/DropdownToggleButton.d.ts

@@ -9,6 +9,7 @@ export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     bsSize: BUTTON_SIZE;
     bsStyle: BUTTON_STYLE;
     variant?: BUTTON_VARIANT;
+    outerRef?: React.Ref<HTMLButtonElement>;
     className?: string;
 };
 declare const DropdownToggleButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<DropdownToggleButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/components/dropdown/DropdownToggleButton.js

@@ -3,9 +3,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import classNames from 'classnames';
 import Button from '../button/Button';
+import useMergeRefs from '../../hooks/useMergeRefs';
 const DropdownToggleButton = forwardRef((props, ref) => {
-    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children } = props, remainingProps = __rest(props, ["id", "disabled", "bsSize", "bsStyle", "variant", "splitButton", "onClick", "className", "children"]);
+    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children, outerRef } = props, remainingProps = __rest(props, ["id", "disabled", "bsSize", "bsStyle", "variant", "splitButton", "onClick", "className", "children", "outerRef"]);
+    const toggleRef = useMergeRefs(outerRef, ref);
     const labelButtonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);
-    return (_jsx(Button, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses }, { children: children })));
+    return (_jsx(Button, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: toggleRef, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses }, { children: children })));
 });
 export default DropdownToggleButton;

package/components/switch/Switch.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import React from 'react';
 import { type CurrentColor } from '../../utils/currentColors';
 export type SwitchProps = {
     /**
@@ -46,9 +46,10 @@ export type SwitchProps = {
      */
     labelPosition?: 'left' | 'right';
 };
-declare const Switch: {
-    (props: PropsWithChildren<SwitchProps>): import("react/jsx-runtime").JSX.Element;
-    LABEL_POSITION_LEFT: "left";
-    LABEL_POSITION_RIGHT: "right";
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>> & {
+    LABEL_POSITION_LEFT: 'left';
+    LABEL_POSITION_RIGHT: 'right';
 };
 export default Switch;

package/components/switch/Switch.js

@@ -1,12 +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 { forwardRef } from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 import { getCurrentBackgroundColor } from '../../utils/currentColors';
-const Switch = (props) => {
-    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, labelPosition = !!children ? 'right' : undefined, onChange = noop } = props, remainingProps = __rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "color", "disabledText", "children", "labelPosition", "onChange"]);
+const Switch = forwardRef((props, ref) => {
+    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, labelPosition = children ? 'right' : undefined, onChange = noop } = props, remainingProps = __rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "color", "disabledText", "children", "labelPosition", "onChange"]);
     const handleChange = (event) => {
         onChange(event.target.checked);
     };
@@ -17,8 +17,8 @@ const Switch = (props) => {
     // !hasMultipleText && !hasSingleText && 'width-40'
     );
     const switchBackgroundColor = getCurrentBackgroundColor(color);
-    return (_jsx("div", Object.assign({}, remainingProps, { className: 'uikit-switch' }, { children: _jsxs("label", Object.assign({ className: switchLabelClasses }, { children: [_jsx("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), _jsxs("div", Object.assign({ className: switchContentClasses, style: { color: switchBackgroundColor, minWidth } }, { children: [hasMultipleText ? (_jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && _jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), _jsx("div", { className: 'switch-handle' })] })), children && children] })) })));
-};
+    return (_jsx("div", Object.assign({ ref: ref }, remainingProps, { className: 'uikit-switch' }, { children: _jsxs("label", Object.assign({ className: switchLabelClasses }, { children: [_jsx("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), _jsxs("div", Object.assign({ className: switchContentClasses, style: { color: switchBackgroundColor, minWidth } }, { children: [hasMultipleText ? (_jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && _jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), _jsx("div", { className: 'switch-handle' })] })), children && children] })) })));
+});
 Switch.LABEL_POSITION_LEFT = 'left';
 Switch.LABEL_POSITION_RIGHT = 'right';
 export default Switch;

package/components/tag/Tag.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import React from 'react';
 export type TagProps = {
     /**
      * Defines if the tag is active.
@@ -65,5 +65,5 @@ export type TagProps = {
      */
     className?: string;
 };
-declare const Tag: (props: PropsWithChildren<TagProps>) => import("react/jsx-runtime").JSX.Element;
+declare const Tag: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<TagProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Tag;

package/components/tag/Tag.js

@@ -1,12 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
+import { forwardRef } from 'react';
 import classNames from 'classnames';
-const Tag = (props) => {
+const Tag = forwardRef((props, ref) => {
     const { children, icon, active = false, disabled = false, clickable = false, selectable = false, deletable = false, revertable = false, multiline = false, muted = false, round = true, size, className } = props, remainingProps = __rest(props, ["children", "icon", "active", "disabled", "clickable", "selectable", "deletable", "revertable", "multiline", "muted", "round", "size", "className"]);
-    const tagClasses = classNames('tag', size === 'small' && 'tag-small', icon && `rioglyph ${icon}`, active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded', // sounds wrong, but is right
-    props.className);
-    return (_jsx("div", Object.assign({}, remainingProps, { className: tagClasses }, { children: _jsx("div", Object.assign({ className: 'tag-inner' }, { children: children })) })));
-};
+    const tagClasses = classNames('tag', size === 'small' && 'tag-small', icon && `rioglyph ${icon}`, active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded', className);
+    return (_jsx("div", Object.assign({ ref: ref }, remainingProps, { className: tagClasses }, { children: _jsx("div", Object.assign({ className: 'tag-inner' }, { children: children })) })));
+});
 export default Tag;

package/hooks/useDOMNodeCount.d.ts

@@ -0,0 +1,2 @@
+declare const useDOMNodeCount: () => number;
+export default useDOMNodeCount;

package/hooks/useDOMNodeCount.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+const useDOMNodeCount = () => {
+    const [nodeCount, setNodeCount] = useState(0);
+    useEffect(() => {
+        const countNodes = () => {
+            const body = document.body;
+            if (body) {
+                setNodeCount(body.getElementsByTagName('*').length);
+            }
+        };
+        // Initial count
+        countNodes();
+        // Create a MutationObserver to watch for changes in the DOM
+        const observer = new MutationObserver(() => {
+            countNodes();
+        });
+        // Observe the body element for changes in the child list or subtree
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        // Cleanup on unmount
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    return nodeCount;
+};
+export default useDOMNodeCount;

package/hooks/useEventListenerCount.d.ts

@@ -0,0 +1,5 @@
+declare const useEventListenerCount: () => {
+    counts: Record<string, number>;
+    total: number;
+};
+export default useEventListenerCount;

package/hooks/useEventListenerCount.js

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+import throttle from 'lodash/fp/throttle';
+const useEventListenerCount = () => {
+    const [listenerCounts, setListenerCounts] = useState({});
+    const [totalCount, setTotalCount] = useState(0);
+    useEffect(() => {
+        console.log('init useEventListener interceptor');
+        const eventListeners = new Set();
+        const originalAddEventListener = EventTarget.prototype.addEventListener;
+        const originalRemoveEventListener = EventTarget.prototype.removeEventListener;
+        const updateListeners = throttle(1000)(() => {
+            const counts = Array.from(eventListeners).reduce((acc, { type }) => {
+                acc[type] = (acc[type] || 0) + 1;
+                return acc;
+            }, {});
+            setListenerCounts(counts);
+            setTotalCount(eventListeners.size);
+        });
+        EventTarget.prototype.addEventListener = function (type, listener, options) {
+            if (listener) {
+                eventListeners.add({ type, listener });
+                updateListeners();
+            }
+            originalAddEventListener.call(this, type, listener, options);
+        };
+        EventTarget.prototype.removeEventListener = function (type, listener, options) {
+            eventListeners.forEach(item => {
+                if (item.type === type && item.listener === listener) {
+                    eventListeners.delete(item);
+                }
+            });
+            updateListeners();
+            originalRemoveEventListener.call(this, type, listener, options);
+        };
+        return () => {
+            EventTarget.prototype.addEventListener = originalAddEventListener;
+            EventTarget.prototype.removeEventListener = originalRemoveEventListener;
+        };
+    }, []);
+    return { counts: listenerCounts, total: totalCount };
+};
+export default useEventListenerCount;

package/lib/es/components/charts/Legend.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getLegendDefaultProps = void 0;
-// @ts-ignore-next-line importsNotUsedAsValues
+// @ts-ignore importsNotUsedAsValues
 require("react");
 const getLegendDefaultProps = () => ({
     iconType: 'circle',

package/lib/es/components/dropdown/ButtonDropdown.d.ts

@@ -117,5 +117,7 @@ export type ButtonDropdownProps = {
      */
     className?: string;
 };
-declare const ButtonDropdown: (props: ButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const ButtonDropdown: React.ForwardRefExoticComponent<ButtonDropdownProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
 export default ButtonDropdown;

package/lib/es/components/dropdown/ButtonDropdown.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+// biome-ignore lint/style/useImportType: <explanation>
 const react_1 = require("react");
 const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
 const react_popper_1 = require("react-popper");
@@ -27,8 +28,8 @@ const getPlacement = (pullRight, dropup) => {
     }
     return 'bottom-start';
 };
-const ButtonDropdown = (props) => {
-    const { id = Math.random().toString(36).substr(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop_1.default, onClose = noop_1.default, onLabelButtonClick = noop_1.default, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '' } = props, remainingProps = tslib_1.__rest(props, ["id", "items", "bsSize", "bsStyle", "variant", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig", "toggleClassName", "dropdownClassName", "className"]);
+const ButtonDropdown = (0, react_1.forwardRef)((props, ref) => {
+    const { id = Math.random().toString(36).slice(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop_1.default, onClose = noop_1.default, onLabelButtonClick = noop_1.default, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '' } = props, remainingProps = tslib_1.__rest(props, ["id", "items", "bsSize", "bsStyle", "variant", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig", "toggleClassName", "dropdownClassName", "className"]);
     const [internalOpen, setInternalOpen] = (0, react_1.useState)(open);
     const [refDropdownToggle, setRefDropdownToggle] = (0, react_1.useState)(null);
     const [refDropdownMenu, setRefDropdownMenu] = (0, react_1.useState)(null);
@@ -91,6 +92,6 @@ const ButtonDropdown = (props) => {
     const wrapperClasses = (0, classnames_1.default)('dropdown', 'btn-group', isOpen && 'open', className);
     const dropdownClasses = (0, classnames_1.default)(usePortal && 'dropdown-portal', splitButton && pullRight && 'pull-right', dropdownClassName);
     const dropdownMenu = ((0, jsx_runtime_1.jsx)(MenuItemList_1.default, Object.assign({ className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper }, attributes.popper, { children: customDropdown ? customDropdown : (0, jsx_runtime_1.jsx)(MenuItems_1.default, { items: items, closeMenu: toggleOpen }) })));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [(0, jsx_runtime_1.jsx)(DropdownToggleButton_1.default, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, className: toggleClassName }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title, shouldShowCaret && (0, jsx_runtime_1.jsx)(Caret_1.default, {})] }) })), splitButton && ((0, jsx_runtime_1.jsx)(SplitCaretButton_1.default, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && react_dom_1.default.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
-};
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [(0, jsx_runtime_1.jsx)(DropdownToggleButton_1.default, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, outerRef: ref, className: toggleClassName }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title, shouldShowCaret && (0, jsx_runtime_1.jsx)(Caret_1.default, {})] }) })), splitButton && ((0, jsx_runtime_1.jsx)(SplitCaretButton_1.default, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && react_dom_1.default.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
+});
 exports.default = ButtonDropdown;

package/lib/es/components/dropdown/DropdownToggleButton.d.ts

@@ -9,6 +9,7 @@ export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     bsSize: BUTTON_SIZE;
     bsStyle: BUTTON_STYLE;
     variant?: BUTTON_VARIANT;
+    outerRef?: React.Ref<HTMLButtonElement>;
     className?: string;
 };
 declare const DropdownToggleButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<DropdownToggleButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/lib/es/components/dropdown/DropdownToggleButton.js

@@ -5,9 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Button_1 = tslib_1.__importDefault(require("../button/Button"));
+const useMergeRefs_1 = tslib_1.__importDefault(require("../../hooks/useMergeRefs"));
 const DropdownToggleButton = (0, react_1.forwardRef)((props, ref) => {
-    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children } = props, remainingProps = tslib_1.__rest(props, ["id", "disabled", "bsSize", "bsStyle", "variant", "splitButton", "onClick", "className", "children"]);
+    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children, outerRef } = props, remainingProps = tslib_1.__rest(props, ["id", "disabled", "bsSize", "bsStyle", "variant", "splitButton", "onClick", "className", "children", "outerRef"]);
+    const toggleRef = (0, useMergeRefs_1.default)(outerRef, ref);
     const labelButtonClasses = (0, classnames_1.default)(!splitButton && 'dropdown-toggle', !splitButton && className);
-    return ((0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: toggleRef, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses }, { children: children })));
 });
 exports.default = DropdownToggleButton;

package/lib/es/components/switch/Switch.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import React from 'react';
 import { type CurrentColor } from '../../utils/currentColors';
 export type SwitchProps = {
     /**
@@ -46,9 +46,10 @@ export type SwitchProps = {
      */
     labelPosition?: 'left' | 'right';
 };
-declare const Switch: {
-    (props: PropsWithChildren<SwitchProps>): import("react/jsx-runtime").JSX.Element;
-    LABEL_POSITION_LEFT: "left";
-    LABEL_POSITION_RIGHT: "right";
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>> & {
+    LABEL_POSITION_LEFT: 'left';
+    LABEL_POSITION_RIGHT: 'right';
 };
 export default Switch;

package/lib/es/components/switch/Switch.js

@@ -3,12 +3,12 @@ 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 noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const currentColors_1 = require("../../utils/currentColors");
-const Switch = (props) => {
-    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, labelPosition = !!children ? 'right' : undefined, onChange = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "color", "disabledText", "children", "labelPosition", "onChange"]);
+const Switch = (0, react_1.forwardRef)((props, ref) => {
+    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, labelPosition = children ? 'right' : undefined, onChange = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "color", "disabledText", "children", "labelPosition", "onChange"]);
     const handleChange = (event) => {
         onChange(event.target.checked);
     };
@@ -19,8 +19,8 @@ const Switch = (props) => {
     // !hasMultipleText && !hasSingleText && 'width-40'
     );
     const switchBackgroundColor = (0, currentColors_1.getCurrentBackgroundColor)(color);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: 'uikit-switch' }, { children: (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: switchLabelClasses }, { children: [(0, jsx_runtime_1.jsx)("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: switchContentClasses, style: { color: switchBackgroundColor, minWidth } }, { children: [hasMultipleText ? ((0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && (0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), (0, jsx_runtime_1.jsx)("div", { className: 'switch-handle' })] })), children && children] })) })));
-};
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, remainingProps, { className: 'uikit-switch' }, { children: (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: switchLabelClasses }, { children: [(0, jsx_runtime_1.jsx)("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: switchContentClasses, style: { color: switchBackgroundColor, minWidth } }, { children: [hasMultipleText ? ((0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && (0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), (0, jsx_runtime_1.jsx)("div", { className: 'switch-handle' })] })), children && children] })) })));
+});
 Switch.LABEL_POSITION_LEFT = 'left';
 Switch.LABEL_POSITION_RIGHT = 'right';
 exports.default = Switch;

package/lib/es/components/tag/Tag.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import React from 'react';
 export type TagProps = {
     /**
      * Defines if the tag is active.
@@ -65,5 +65,5 @@ export type TagProps = {
      */
     className?: string;
 };
-declare const Tag: (props: PropsWithChildren<TagProps>) => import("react/jsx-runtime").JSX.Element;
+declare const Tag: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<TagProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Tag;

package/lib/es/components/tag/Tag.js

@@ -3,12 +3,11 @@ 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 Tag = (props) => {
+const Tag = (0, react_1.forwardRef)((props, ref) => {
     const { children, icon, active = false, disabled = false, clickable = false, selectable = false, deletable = false, revertable = false, multiline = false, muted = false, round = true, size, className } = props, remainingProps = tslib_1.__rest(props, ["children", "icon", "active", "disabled", "clickable", "selectable", "deletable", "revertable", "multiline", "muted", "round", "size", "className"]);
-    const tagClasses = (0, classnames_1.default)('tag', size === 'small' && 'tag-small', icon && `rioglyph ${icon}`, active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded', // sounds wrong, but is right
-    props.className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: tagClasses }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tag-inner' }, { children: children })) })));
-};
+    const tagClasses = (0, classnames_1.default)('tag', size === 'small' && 'tag-small', icon && `rioglyph ${icon}`, active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded', className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, remainingProps, { className: tagClasses }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tag-inner' }, { children: children })) })));
+});
 exports.default = Tag;

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

@@ -0,0 +1,2 @@
+declare const useDOMNodeCount: () => number;
+export default useDOMNodeCount;

package/lib/es/hooks/useDOMNodeCount.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useDOMNodeCount = () => {
+    const [nodeCount, setNodeCount] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        const countNodes = () => {
+            const body = document.body;
+            if (body) {
+                setNodeCount(body.getElementsByTagName('*').length);
+            }
+        };
+        // Initial count
+        countNodes();
+        // Create a MutationObserver to watch for changes in the DOM
+        const observer = new MutationObserver(() => {
+            countNodes();
+        });
+        // Observe the body element for changes in the child list or subtree
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        // Cleanup on unmount
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    return nodeCount;
+};
+exports.default = useDOMNodeCount;

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

@@ -0,0 +1,5 @@
+declare const useEventListenerCount: () => {
+    counts: Record<string, number>;
+    total: number;
+};
+export default useEventListenerCount;

package/lib/es/hooks/useEventListenerCount.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const throttle_1 = tslib_1.__importDefault(require("lodash/fp/throttle"));
+const useEventListenerCount = () => {
+    const [listenerCounts, setListenerCounts] = (0, react_1.useState)({});
+    const [totalCount, setTotalCount] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        console.log('init useEventListener interceptor');
+        const eventListeners = new Set();
+        const originalAddEventListener = EventTarget.prototype.addEventListener;
+        const originalRemoveEventListener = EventTarget.prototype.removeEventListener;
+        const updateListeners = (0, throttle_1.default)(1000)(() => {
+            const counts = Array.from(eventListeners).reduce((acc, { type }) => {
+                acc[type] = (acc[type] || 0) + 1;
+                return acc;
+            }, {});
+            setListenerCounts(counts);
+            setTotalCount(eventListeners.size);
+        });
+        EventTarget.prototype.addEventListener = function (type, listener, options) {
+            if (listener) {
+                eventListeners.add({ type, listener });
+                updateListeners();
+            }
+            originalAddEventListener.call(this, type, listener, options);
+        };
+        EventTarget.prototype.removeEventListener = function (type, listener, options) {
+            eventListeners.forEach(item => {
+                if (item.type === type && item.listener === listener) {
+                    eventListeners.delete(item);
+                }
+            });
+            updateListeners();
+            originalRemoveEventListener.call(this, type, listener, options);
+        };
+        return () => {
+            EventTarget.prototype.addEventListener = originalAddEventListener;
+            EventTarget.prototype.removeEventListener = originalRemoveEventListener;
+        };
+    }, []);
+    return { counts: listenerCounts, total: totalCount };
+};
+exports.default = useEventListenerCount;

package/lib/es/useDOMNodeCount.d.ts

@@ -0,0 +1,2 @@
+export { default } from './hooks/useDOMNodeCount';
+export * from './hooks/useDOMNodeCount';

package/lib/es/useDOMNodeCount.js

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

package/lib/es/useEventListenerCount.d.ts

@@ -0,0 +1,2 @@
+export { default } from './hooks/useEventListenerCount';
+export * from './hooks/useEventListenerCount';

package/lib/es/useEventListenerCount.js

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

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.4.0"
+    "version": "1.4.1"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "1.4.0",
+    "version": "1.4.1",
     "description": "The RIO UIKIT component library",
     "repository": "https://bitbucket.collaboration-man.com/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
@@ -43,9 +43,7 @@
     "module": "index.js",
     "types": "index.d.ts",
     "less": "./styles/css/rio-uikit.less",
-    "files": [
-        "**/*.*"
-    ],
+    "files": ["**/*.*"],
     "devDependencies": {
         "@testing-library/dom": "9.3.3",
         "@testing-library/jest-dom": "5.17.0",
@@ -132,12 +130,6 @@
     "overrides": {
         "iframe-resizer": "4.3.11"
     },
-    "pre-commit": [
-        "format-code"
-    ],
-    "browserslist": [
-        "> 0.5%",
-        "Firefox ESR",
-        "not dead"
-    ]
+    "pre-commit": ["format-code"],
+    "browserslist": ["> 0.5%", "Firefox ESR", "not dead"]
 }

package/useDOMNodeCount.d.ts

@@ -0,0 +1,2 @@
+export { default } from './hooks/useDOMNodeCount';
+export * from './hooks/useDOMNodeCount';

package/useDOMNodeCount.js

@@ -0,0 +1,2 @@
+export { default } from './hooks/useDOMNodeCount';
+export * from './hooks/useDOMNodeCount';

package/useEventListenerCount.d.ts

@@ -0,0 +1,2 @@
+export { default } from './hooks/useEventListenerCount';
+export * from './hooks/useEventListenerCount';

package/useEventListenerCount.js

@@ -0,0 +1,2 @@
+export { default } from './hooks/useEventListenerCount';
+export * from './hooks/useEventListenerCount';

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.4.0"
+    "version": "1.4.1"
 }