@rio-cloud/rio-uikit 0.16.4-beta.1 → 0.16.4-beta.2

package/lib/es/TrafficLayer.js

@@ -1,13 +1,6 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _TrafficLayer2["default"];
-  }
-});
-var _TrafficLayer2 = _interopRequireDefault(require("./components/map/components/features/layers/TrafficLayer"));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+const TrafficLayer_1 = tslib_1.__importDefault(require("./components/map/components/features/layers/TrafficLayer"));
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return TrafficLayer_1.default; } });

package/lib/es/Tree.js

@@ -1,13 +1,6 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _Tree2["default"];
-  }
-});
-var _Tree2 = _interopRequireDefault(require("./components/assetTree/Tree"));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+const Tree_1 = tslib_1.__importDefault(require("./components/assetTree/Tree"));
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Tree_1.default; } });

package/lib/es/TreeCategory.js

@@ -1,13 +1,6 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _TreeCategory2["default"];
-  }
-});
-var _TreeCategory2 = _interopRequireDefault(require("./components/assetTree/TreeCategory"));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+const TreeCategory_1 = tslib_1.__importDefault(require("./components/assetTree/TreeCategory"));
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return TreeCategory_1.default; } });

package/lib/es/TreeOption.js

@@ -1,13 +1,6 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _TreeOption2["default"];
-  }
-});
-var _TreeOption2 = _interopRequireDefault(require("./components/assetTree/TreeOption"));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+const TreeOption_1 = tslib_1.__importDefault(require("./components/assetTree/TreeOption"));
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return TreeOption_1.default; } });

package/lib/es/TreeSearch.js

@@ -1,13 +1,6 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _TreeSearch2["default"];
-  }
-});
-var _TreeSearch2 = _interopRequireDefault(require("./components/assetTree/TreeSearch"));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+const TreeSearch_1 = tslib_1.__importDefault(require("./components/assetTree/TreeSearch"));
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return TreeSearch_1.default; } });

package/lib/es/TreeSummary.js

@@ -1,13 +1,6 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _TreeSummary2["default"];
-  }
-});
-var _TreeSummary2 = _interopRequireDefault(require("./components/assetTree/TreeSummary"));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+const TreeSummary_1 = tslib_1.__importDefault(require("./components/assetTree/TreeSummary"));
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return TreeSummary_1.default; } });

package/lib/es/TruckLayer.js

@@ -1,13 +1,6 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _RoadRestrictionLayer["default"];
-  }
-});
-var _RoadRestrictionLayer = _interopRequireDefault(require("./components/map/components/features/layers/RoadRestrictionLayer"));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+const RoadRestrictionLayer_1 = tslib_1.__importDefault(require("./components/map/components/features/layers/RoadRestrictionLayer"));
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return RoadRestrictionLayer_1.default; } });

package/lib/es/TypeCounter.js

@@ -1,13 +1,6 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _TypeCounter2["default"];
-  }
-});
-var _TypeCounter2 = _interopRequireDefault(require("./components/assetTree/TypeCounter"));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+const TypeCounter_1 = tslib_1.__importDefault(require("./components/assetTree/TypeCounter"));
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return TypeCounter_1.default; } });

package/lib/es/VolkswagenApplicationHeader.js

@@ -1,13 +1,6 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _VolkswagenApplicationHeader2["default"];
-  }
-});
-var _VolkswagenApplicationHeader2 = _interopRequireDefault(require("./themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader"));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+const VolkswagenApplicationHeader_1 = tslib_1.__importDefault(require("./themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader"));
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return VolkswagenApplicationHeader_1.default; } });

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

@@ -0,0 +1,29 @@
+import React, { type PropsWithChildren } from 'react';
+import ActionBarItemPopoverContent from './ActionBarItemPopoverContent';
+import ActionBarItemIcon from './ActionBarItemIcon';
+import ActionBarItemList from './ActionBarItemList';
+import ActionBarItemListItem from './ActionBarItemListItem';
+import ActionBarItemListSeparator from './ActionBarItemListSeparator';
+export type ActionBarItemPopoverWidth = 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;
+export type ActionBarItemProps = {
+    id?: string;
+    title?: string | React.ReactNode;
+    className?: string;
+    hidePopoverOnClick?: boolean;
+    popoverWidth?: ActionBarItemPopoverWidth;
+    mobileDialogBodyClassName?: string;
+};
+export type ActionBarItemComponents = {
+    Icon: typeof ActionBarItemIcon;
+    Popover: typeof ActionBarItemPopoverContent;
+    List: typeof ActionBarItemList;
+    ListItem: typeof ActionBarItemListItem;
+    ListSeparator: typeof ActionBarItemListSeparator;
+};
+type ActionBarItemPropsWithChildren = PropsWithChildren<ActionBarItemProps>;
+declare const ActionBarItem: ActionBarItemComponents & React.NamedExoticComponent<ActionBarItemProps & {
+    children?: React.ReactNode;
+}> & {
+    readonly type: React.FC<ActionBarItemPropsWithChildren>;
+};
+export default ActionBarItem;

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

@@ -1,220 +1,120 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.ActionBarItem = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _head = _interopRequireDefault(require("lodash/fp/head"));
-var _negate = _interopRequireDefault(require("lodash/fp/negate"));
-var _delay = _interopRequireDefault(require("lodash/fp/delay"));
-var _ActionBarOverlay = require("./ActionBarOverlay");
-var _ActionBarItemPopoverContent = require("./ActionBarItemPopoverContent");
-var _ActionBarItemIcon = require("./ActionBarItemIcon");
-var _ActionBarItemList = require("./ActionBarItemList");
-var _ActionBarItemListItem = require("./ActionBarItemListItem");
-var _ActionBarItemListSeparator = require("./ActionBarItemListSeparator");
-var _OverlayTrigger = _interopRequireDefault(require("../overlay/OverlayTrigger"));
-var _Dialog = _interopRequireDefault(require("../dialog/Dialog"));
-var _excluded = ["className", "mobileDialogBodyClassName", "children", "popoverWidth", "id", "hidePopoverOnClick"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var EVENT = 'mousedown';
-var CLASSNAME_SHOW = 'show';
-var CLASSNAME_OFFSCREEN = 'position-offscreen';
-var POPOVER_CLOSE_DELAY_IN_MS = 200;
-var SMALL_RESOLUTION_THRESHOLD_IN_PX = 580;
-var getRandomString = function getRandomString() {
-  return (Math.random() + 1).toString(36).toUpperCase().substring(2);
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const head_1 = tslib_1.__importDefault(require("lodash/fp/head"));
+const negate_1 = tslib_1.__importDefault(require("lodash/fp/negate"));
+const delay_1 = tslib_1.__importDefault(require("lodash/fp/delay"));
+const ActionBarOverlay_1 = tslib_1.__importDefault(require("./ActionBarOverlay"));
+const ActionBarItemPopoverContent_1 = tslib_1.__importDefault(require("./ActionBarItemPopoverContent"));
+const ActionBarItemIcon_1 = tslib_1.__importDefault(require("./ActionBarItemIcon"));
+const ActionBarItemList_1 = tslib_1.__importDefault(require("./ActionBarItemList"));
+const ActionBarItemListItem_1 = tslib_1.__importDefault(require("./ActionBarItemListItem"));
+const ActionBarItemListSeparator_1 = tslib_1.__importDefault(require("./ActionBarItemListSeparator"));
+const OverlayTrigger_1 = tslib_1.__importDefault(require("../overlay/OverlayTrigger"));
+const Dialog_1 = tslib_1.__importDefault(require("../dialog/Dialog"));
+const EVENT = 'mousedown';
+const CLASSNAME_SHOW = 'show';
+const CLASSNAME_OFFSCREEN = 'position-offscreen';
+const DEFAULT_POPOVER_WIDTH = 250;
+const POPOVER_CLOSE_DELAY_IN_MS = 200;
+const SMALL_RESOLUTION_THRESHOLD_IN_PX = 580;
+const getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);
+const hasClass = (element, className) => element.classList.contains(className);
+const hasNotClass = (0, negate_1.default)(hasClass);
+const isNotChildNodeOf = (childNode, parentNode) => !parentNode.contains(childNode);
+const checkIfSmallResolution = () => {
+    const [isSmallResolution, setIsSmallResolution] = (0, react_1.useState)(false);
+    // We only execute this once. Before it was re-rendered on every change.
+    // Users probably don't switch between display sizes that often therefore it probably makes sense to
+    // avoid the re-rendering or applying an event listener.
+    (0, react_1.useEffect)(() => {
+        const header = (0, head_1.default)(document.getElementsByClassName('ApplicationHeader'));
+        const isSmall = header ? header.offsetWidth < SMALL_RESOLUTION_THRESHOLD_IN_PX : false;
+        setIsSmallResolution(isSmall);
+    }, []);
+    return isSmallResolution;
 };
-var hasClass = function hasClass(element, className) {
-  return element.classList.contains(className);
-};
-var hasNotClass = (0, _negate["default"])(hasClass);
-var isNotChildNodeOf = function isNotChildNodeOf(childNode, parentNode) {
-  return !parentNode.contains(childNode);
-};
-var checkIfSmallResolution = function checkIfSmallResolution() {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isSmallResolution = _useState2[0],
-    setIsSmallResolution = _useState2[1];
-
-  // We only execute this once. Before it was re rendered on every change.
-  // Users probably don't switch between display sizes that often therefore it probably makes sense to
-  // avoid the re rendering. Or applying an event listnener.
-  (0, _react.useEffect)(function () {
-    var header = (0, _head["default"])(document.getElementsByClassName('ApplicationHeader'));
-    setIsSmallResolution(header && header.offsetWidth < SMALL_RESOLUTION_THRESHOLD_IN_PX);
-  }, []);
-  return isSmallResolution;
-};
-var isActionBarItemPopover = function isActionBarItemPopover(child) {
-  var _child$type;
-  return ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === _ActionBarItemPopoverContent.ActionBarItemPopoverContent.displayName;
-};
-var isActionBarItemIcon = function isActionBarItemIcon(child) {
-  var _child$type2;
-  return ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === _ActionBarItemIcon.ActionBarItemIcon.displayName;
-};
-var ActionBarItem = /*#__PURE__*/_react["default"].memo(function (props) {
-  var className = props.className,
-    mobileDialogBodyClassName = props.mobileDialogBodyClassName,
-    children = props.children,
-    popoverWidth = props.popoverWidth,
-    id = props.id,
-    hidePopoverOnClick = props.hidePopoverOnClick,
-    remainigProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    isShown = _useState4[0],
-    setIsShown = _useState4[1];
-  var clickOutsideRef = (0, _react.useRef)();
-  (0, _react.useLayoutEffect)(function () {
-    var listener = function listener(event) {
-      if (!clickOutsideRef || !clickOutsideRef.current || !isShown) {
-        return;
-      }
-
-      // Since the popover component is based on React Portal and might be offscreen, we need to use
-      // old-school approach and query the DOM for the item ID.
-      var popoverEl = document.getElementById(id);
-      if (!popoverEl) {
-        return;
-      }
-
-      // Abort when the ActionBarItemIcon itself has been clicked as there is a toggle function
-      // applied to the icon that takes care of opening and closing
-      var hasIconClickedToClose = event.target.offsetParent === clickOutsideRef.current;
-      if (hasIconClickedToClose) {
-        return;
-      }
-
-      // Handle click outside the popover to close it
-      var isClickOutsidePopover = isNotChildNodeOf(event.target, popoverEl);
-      var isPopoverVisible = hasClass(popoverEl, CLASSNAME_SHOW) && hasNotClass(popoverEl, CLASSNAME_OFFSCREEN);
-      if (isPopoverVisible && isClickOutsidePopover) {
-        setIsShown(false);
-        return;
-      }
-
-      // Handle click inside the popover.
-      // Delay the closing of the popover to execute possible actions from within the popover
-      // like clicks on links or buttons
-      if (hidePopoverOnClick) {
-        (0, _delay["default"])(POPOVER_CLOSE_DELAY_IN_MS)(function () {
-          return setIsShown(false);
-        });
-      }
-    };
-    document.addEventListener(EVENT, listener);
-    return function () {
-      document.removeEventListener(EVENT, listener);
-    };
-  }, [clickOutsideRef, id, isShown]);
-  var classes = (0, _classnames["default"])('ActionBarItem', className);
-  var isSmallScreen = checkIfSmallResolution();
-  var onToggle = (0, _react.useCallback)(function () {
-    return setIsShown(!isShown);
-  }, [setIsShown, isShown]);
-
-  // The children depend on each other, that's why it's easier to convert them once to an array
-  // and then pick the correct elements. In most cases there are only 2 or 3 elements in the children
-  // array so the looping shouldn't be too worrysome.
-  var childrenAsList = _react["default"].Children.toArray(children);
-  var itemPopover = childrenAsList.find(isActionBarItemPopover);
-  var itemIcon = childrenAsList.find(isActionBarItemIcon);
-  if (!itemPopover) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: classes
-    }, children);
-  }
-  var _itemPopover$props = itemPopover.props,
-    _itemPopover$props$us = _itemPopover$props.useOffscreen,
-    useOffscreen = _itemPopover$props$us === void 0 ? false : _itemPopover$props$us,
-    title = _itemPopover$props.title;
-
-  // Filter out the popover and icon component from the list of children as they are handled separetely
-  var childrenWithoutPopover = childrenAsList.filter(function (child) {
-    return !isActionBarItemPopover(child);
-  });
-  var childrenWithoutPopoverAndIcon = childrenWithoutPopover.filter(function (child) {
-    return !isActionBarItemIcon(child);
-  });
-  if (isSmallScreen) {
-    return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, remainigProps, {
-      className: classes,
-      ref: clickOutsideRef
-    }), /*#__PURE__*/_react["default"].cloneElement(itemIcon, {
-      onClick: onToggle
-    }), /*#__PURE__*/_react["default"].createElement("div", {
-      onClick: function onClick() {
-        return setIsShown(false);
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
-      show: isShown,
-      onHide: function onHide() {
-        return setIsShown(false);
-      },
-      body: itemPopover,
-      bodyClassName: mobileDialogBodyClassName,
-      title: title
-    })), childrenWithoutPopoverAndIcon);
-  }
-  var overlay = /*#__PURE__*/_react["default"].createElement(_ActionBarOverlay.ActionBarOverlay, {
-    id: id,
-    key: "child",
-    title: title,
-    width: popoverWidth,
-    preRender: useOffscreen,
-    show: isShown
-  }, itemPopover);
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, remainigProps, {
-    className: classes,
-    ref: clickOutsideRef
-  }), /*#__PURE__*/_react["default"].createElement(_OverlayTrigger["default"], {
-    onToggle: onToggle,
-    show: isShown || useOffscreen,
-    placement: _OverlayTrigger["default"].BOTTOM_END,
-    overlay: overlay,
-    trigger: "click",
-    rootClose: false,
-    popperConfig: {
-      modifiers: [{
-        name: 'offset',
-        options: {
-          offset: [0, 5]
-        }
-      }]
+const isActionBarItemPopover = (child) => child.type && child.type.displayName === ActionBarItemPopoverContent_1.default.displayName;
+const isActionBarItemIcon = (child) => child.type && child.type.displayName === ActionBarItemIcon_1.default.displayName;
+const ActionBarItemBase = (props) => {
+    const { id = getRandomString(), className, mobileDialogBodyClassName = '', children, popoverWidth = DEFAULT_POPOVER_WIDTH, hidePopoverOnClick = true } = props, remainingProps = tslib_1.__rest(props, ["id", "className", "mobileDialogBodyClassName", "children", "popoverWidth", "hidePopoverOnClick"]);
+    const [isShown, setIsShown] = (0, react_1.useState)(false);
+    const clickOutsideRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const listener = (event) => {
+            if (!clickOutsideRef || !clickOutsideRef.current || !isShown) {
+                return;
+            }
+            // Since the popover component is based on React Portal and might be offscreen, we need to use
+            // old-school approach and query the DOM for the item ID.
+            const popoverEl = document.getElementById(id);
+            if (!popoverEl) {
+                return;
+            }
+            // Abort when the ActionBarItemIcon itself has been clicked as there is a toggle function
+            // applied to the icon that takes care of opening and closing
+            const hasIconClickedToClose = event.target.offsetParent === clickOutsideRef.current;
+            if (hasIconClickedToClose) {
+                return;
+            }
+            // Handle click outside the popover to close it
+            const isClickOutsidePopover = isNotChildNodeOf(event.target, popoverEl);
+            const isPopoverVisible = hasClass(popoverEl, CLASSNAME_SHOW) && hasNotClass(popoverEl, CLASSNAME_OFFSCREEN);
+            if (isPopoverVisible && isClickOutsidePopover) {
+                setIsShown(false);
+                return;
+            }
+            // Handle click inside the popover.
+            // Delay the closing of the popover to execute possible actions from within the popover
+            // like clicks on links or buttons
+            if (hidePopoverOnClick) {
+                (0, delay_1.default)(POPOVER_CLOSE_DELAY_IN_MS)(() => setIsShown(false));
+            }
+        };
+        document.addEventListener(EVENT, listener);
+        return () => {
+            document.removeEventListener(EVENT, listener);
+        };
+    }, [clickOutsideRef, id, isShown]);
+    const classes = (0, classnames_1.default)('ActionBarItem', className);
+    const isSmallScreen = checkIfSmallResolution();
+    const onToggle = (0, react_1.useCallback)(() => setIsShown(!isShown), [setIsShown, isShown]);
+    // The children depend on each other, that's why it's easier to convert them once to an array
+    // and then pick the correct elements. In most cases there are only 2 or 3 elements in the children
+    // array so the looping shouldn't be too worrisome.
+    const childrenAsList = react_1.default.Children.toArray(children);
+    const itemPopover = childrenAsList.find(isActionBarItemPopover);
+    const itemIcon = childrenAsList.find(isActionBarItemIcon);
+    if (!itemPopover) {
+        return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes }, { children: children }));
     }
-  }, itemIcon), childrenWithoutPopoverAndIcon);
-});
-exports.ActionBarItem = ActionBarItem;
-ActionBarItem.Icon = _ActionBarItemIcon.ActionBarItemIcon;
-ActionBarItem.Popover = _ActionBarItemPopoverContent.ActionBarItemPopoverContent;
-ActionBarItem.List = _ActionBarItemList.ActionBarItemList;
-ActionBarItem.ListItem = _ActionBarItemListItem.ActionBarItemListItem;
-ActionBarItem.ListSeparator = _ActionBarItemListSeparator.ActionBarItemListSeparator;
-ActionBarItem.defaultProps = {
-  id: getRandomString(),
-  hidePopoverOnClick: true,
-  popoverWidth: 250,
-  mobileDialogBodyClassName: ''
-};
-ActionBarItem.propTypes = {
-  id: _propTypes["default"].string,
-  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
-  className: _propTypes["default"].string,
-  mobileDialogBodyClassName: _propTypes["default"].string,
-  hidePopoverOnClick: _propTypes["default"].bool,
-  popoverWidth: _propTypes["default"].oneOf([100, 150, 200, 250, 300, 350, 400, 450, 500])
+    const { useOffscreen = false, title } = itemPopover.props;
+    // Filter out the popover and icon component from the list of children as they are handled separately
+    const childrenWithoutPopover = childrenAsList.filter(child => !isActionBarItemPopover(child));
+    const childrenWithoutPopoverAndIcon = childrenWithoutPopover.filter(child => !isActionBarItemIcon(child));
+    if (isSmallScreen) {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [react_1.default.cloneElement(itemIcon, { onClick: onToggle }), (0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: () => setIsShown(false) }, { children: (0, jsx_runtime_1.jsx)(Dialog_1.default, { show: isShown, onHide: () => setIsShown(false), body: itemPopover, bodyClassName: mobileDialogBodyClassName, title: title }) })), childrenWithoutPopoverAndIcon] })));
+    }
+    const overlay = ((0, jsx_runtime_1.jsx)(ActionBarOverlay_1.default, Object.assign({ id: id, title: title, width: popoverWidth, preRender: useOffscreen, show: isShown }, { children: itemPopover }), 'child'));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [(0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ onToggle: onToggle, show: isShown || useOffscreen, placement: OverlayTrigger_1.default.BOTTOM_END, overlay: overlay, trigger: 'click', rootClose: false, popperConfig: {
+                    modifiers: [
+                        {
+                            name: 'offset',
+                            options: {
+                                offset: [0, 5],
+                            },
+                        },
+                    ],
+                } }, { children: itemIcon })), childrenWithoutPopoverAndIcon] })));
 };
-var _default = ActionBarItem;
-exports["default"] = _default;
+const ActionBarItem = (0, react_1.memo)(ActionBarItemBase);
+// Define static variables on the component type
+ActionBarItem.Icon = ActionBarItemIcon_1.default;
+ActionBarItem.Popover = ActionBarItemPopoverContent_1.default;
+ActionBarItem.List = ActionBarItemList_1.default;
+ActionBarItem.ListItem = ActionBarItemListItem_1.default;
+ActionBarItem.ListSeparator = ActionBarItemListSeparator_1.default;
+exports.default = ActionBarItem;

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

@@ -0,0 +1,9 @@
+import { type PropsWithChildren } from 'react';
+type ActionBarItemIconProps = {
+    className: string;
+};
+declare const ActionBarItemIcon: {
+    (props: PropsWithChildren<ActionBarItemIconProps>): JSX.Element;
+    displayName: string;
+};
+export default ActionBarItemIcon;

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

@@ -1,29 +1,14 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.ActionBarItemIcon = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _excluded = ["className", "children"];
-var ActionBarItemIcon = function ActionBarItemIcon(_ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    remainingProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = (0, _classnames["default"])('ActionBarItemIcon', className);
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, remainingProps, {
-    className: classes
-  }), children);
+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 classnames_1 = tslib_1.__importDefault(require("classnames"));
+const ActionBarItemIcon = (props) => {
+    const { className, children } = props, remainingProps = tslib_1.__rest(props, ["className", "children"]);
+    const classes = (0, classnames_1.default)('ActionBarItemIcon', className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: classes }, { children: children })));
 };
-exports.ActionBarItemIcon = ActionBarItemIcon;
 ActionBarItemIcon.displayName = 'ActionBarItemIcon';
-ActionBarItemIcon.propTypes = {
-  className: _propTypes["default"].string
-};
-var _default = ActionBarItemIcon;
-exports["default"] = _default;
+exports.default = ActionBarItemIcon;

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

@@ -0,0 +1,9 @@
+import { type PropsWithChildren } from 'react';
+export type ActionBarItemListProps = {
+    className?: string;
+};
+declare const ActionBarItemList: {
+    ({ className, children, ...remainingProps }: PropsWithChildren<ActionBarItemListProps>): JSX.Element;
+    displayName: string;
+};
+export default ActionBarItemList;