carbon-react 109.1.0 → 109.1.1

package/esm/components/date/date.component.js

@@ -12,7 +12,7 @@ import StyledDateInput from "./date.style";
 import Textbox from "../textbox";
 import DatePicker from "./__internal__/date-picker";
 import DateRangeContext from "../date-range/date-range.context";
-import ClickAwayWrapper from "../../__internal__/click-away-wrapper";
+import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const DateInput = ({
@@ -277,11 +277,8 @@ const DateInput = ({
     }
   };
 
-  return /*#__PURE__*/React.createElement(ClickAwayWrapper, {
-    handleClickAway: handleClickAway,
-    eventTypeId: "mousedown",
-    targets: [parentRef, pickerRef]
-  }, /*#__PURE__*/React.createElement(StyledDateInput, _extends({
+  useClickAwayListener([parentRef, pickerRef], handleClickAway, "mousedown");
+  return /*#__PURE__*/React.createElement(StyledDateInput, _extends({
     ref: wrapperRef,
     role: "presentation",
     size: size,
@@ -321,7 +318,7 @@ const DateInput = ({
     ref: pickerRef,
     pickerMouseDown: handlePickerMouseDown,
     open: open
-  })));
+  }));
 };
 
 DateInput.propTypes = { ...Textbox.propTypes,

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -12,7 +12,7 @@ import MenuItem from "../../menu-item";
 import { characterNavigation } from "../keyboard-navigation";
 import ScrollableBlock from "../../scrollable-block";
 import SubmenuContext from "./submenu.context";
-import ClickAwayWrapper from "../../../../__internal__/click-away-wrapper";
+import useClickAwayListener from "../../../../hooks/__internal__/useClickAwayListener";
 const Submenu = /*#__PURE__*/React.forwardRef(({
   children,
   className,
@@ -205,6 +205,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [characterString]);
+  useClickAwayListener([submenuRef], handleClickAway);
 
   if (inFullscreenView) {
     return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
@@ -238,10 +239,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     }, child))));
   }
 
-  return /*#__PURE__*/React.createElement(ClickAwayWrapper, {
-    handleClickAway: handleClickAway,
-    targets: [submenuRef]
-  }, /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
+  return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
     "data-component": "submenu-wrapper",
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
@@ -279,7 +277,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       updateFocusIndex: setSubmenuFocusIndex,
       itemIndex: child.type === MenuItem ? index : undefined
     }
-  }, child)))));
+  }, child))));
 });
 Submenu.propTypes = {
   /** Children elements */

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useEffect, useState, useRef, useMemo } from "react";
 import PropTypes from "prop-types";
+import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import { StyledMultiActionButton, StyledButtonChildrenContainer } from "./multi-action-button.style";
 import Button, { ButtonWithForwardRef } from "../button";
 import Events from "../../__internal__/utils/helpers/events";
@@ -105,31 +106,20 @@ const MultiActionButton = ({
       (_additionalButtons$cu = additionalButtons.current[nextIndex].current) === null || _additionalButtons$cu === void 0 ? void 0 : _additionalButtons$cu.focus();
     }
   }, [buttonChildren, hideButtons]);
-  const handleClickOutside = useCallback(({
-    target
-  }) => {
-    var _ref$current, _buttonContainer$curr;
-
-    if (!((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) && !((_buttonContainer$curr = buttonContainer.current) !== null && _buttonContainer$curr !== void 0 && _buttonContainer$curr.contains(target))) {
-      hideButtons();
-    }
-  }, [hideButtons]);
   const addListeners = useCallback(() => {
     /* istanbul ignore else */
     if (!listening.current) {
-      document.addEventListener("click", handleClickOutside);
       document.addEventListener("keydown", handleKeyDown);
       listening.current = true;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   const removeListeners = useCallback(() => {
     /* istanbul ignore else */
     if (listening.current) {
-      document.removeEventListener("click", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
       listening.current = false;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   useEffect(() => {
     if (showAdditionalButtons) {
       addListeners();
@@ -200,6 +190,7 @@ const MultiActionButton = ({
     ref: buttonContainer
   }, childrenWithProps()));
 
+  useClickAwayListener([ref], hideButtons);
   return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,

package/esm/components/popover-container/popover-container.component.d.ts

@@ -36,7 +36,7 @@ export interface PopoverContainerProps extends PaddingProps {
     /** Sets the popover container dialog header name */
     title?: string;
     /** Callback fires when close icon clicked */
-    onClose?: (ev: React.MouseEvent<HTMLElement>) => void;
+    onClose?: (ev: React.MouseEvent<HTMLElement> | Event) => void;
     /** if `true` the popover-container is open */
     open?: boolean;
     /** Callback fires when open component is clicked */

package/esm/components/popover-container/popover-container.component.js

@@ -7,7 +7,7 @@ import { PopoverContainerWrapperStyle, PopoverContainerHeaderStyle, PopoverConta
 import Icon from "../icon";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
-import ClickAwayWrapper from "../../__internal__/click-away-wrapper";
+import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 
 const renderOpen = ({
   tabIndex,
@@ -118,19 +118,15 @@ const PopoverContainer = ({
     onClick: handleCloseButtonClick,
     ref: closeButtonRef,
     "aria-label": closeButtonAriaLabel
-  }; // TODO: Assign proper type after ClickAwayWrapper has been refactored
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  };
 
   const handleClickAway = e => {
     if (!isControlled) setIsOpenInternal(false);
     if (onClose) onClose(e);
   };
 
-  return /*#__PURE__*/React.createElement(ClickAwayWrapper, {
-    targets: [ref],
-    handleClickAway: handleClickAway,
-    eventTypeId: "mousedown"
-  }, /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
+  useClickAwayListener([ref], handleClickAway, "mousedown");
+  return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
     role: "region",
     "aria-labelledby": popoverContainerId,
@@ -158,7 +154,7 @@ const PopoverContainer = ({
   }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(PopoverContainerHeaderStyle, null, /*#__PURE__*/React.createElement(PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"
-  }, title), renderCloseComponent(renderCloseComponentProps)), children))));
+  }, title), renderCloseComponent(renderCloseComponentProps)), children)));
 };
 
 PopoverContainer.propTypes = {

package/esm/components/split-button/split-button.component.js

@@ -4,6 +4,7 @@ import React, { useRef, useState, useContext, useCallback, useEffect } from "rea
 import { ThemeContext } from "styled-components";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
+import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import Icon from "../icon";
 import Button, { ButtonWithForwardRef } from "../button";
 import StyledSplitButton from "./split-button.style";
@@ -49,13 +50,6 @@ const SplitButton = ({
     if (isToggleButtonFocused.current) return;
     setShowAdditionalButtons(false);
   }, []);
-  const handleClickOutside = useCallback(({
-    target
-  }) => {
-    if (!splitButtonNode.current.contains(target) && buttonContainer.current && !buttonContainer.current.contains(target)) {
-      hideButtons();
-    }
-  }, [hideButtons]);
   const handleKeyDown = useCallback(ev => {
     const numOfChildren = children.length - 1;
     const currentIndex = additionalButtons.current.findIndex(node => node.current === document.activeElement);
@@ -88,19 +82,17 @@ const SplitButton = ({
   const addListeners = useCallback(() => {
     /* istanbul ignore else */
     if (!listening.current) {
-      document.addEventListener("click", handleClickOutside);
       document.addEventListener("keydown", handleKeyDown);
       listening.current = true;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   const removeListeners = useCallback(() => {
     /* istanbul ignore else */
     if (listening.current) {
-      document.removeEventListener("click", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
       listening.current = false;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   useEffect(() => {
     if (showAdditionalButtons) {
       addListeners();
@@ -260,6 +252,7 @@ const SplitButton = ({
     }, childrenWithProps()));
   }
 
+  useClickAwayListener([splitButtonNode], hideButtons);
   return /*#__PURE__*/React.createElement(StyledSplitButton, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,

package/esm/hooks/__internal__/useClickAwayListener/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useClickAwayListener";

package/esm/hooks/__internal__/useClickAwayListener/index.js

@@ -0,0 +1 @@
+export { default } from "./useClickAwayListener";

package/esm/hooks/__internal__/useClickAwayListener/useClickAwayListener.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: (targets: React.RefObject<HTMLElement>[], handleClickAway: (ev: Event) => void, eventTypeId?: "mousedown" | "click") => void;
+export default _default;

package/esm/hooks/__internal__/useClickAwayListener/useClickAwayListener.js

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+export default ((targets, handleClickAway, eventTypeId = "click") => {
+  const targetsRef = useRef(targets);
+  targetsRef.current = targets;
+  useEffect(() => {
+    const fnClickAway = ev => {
+      const clickedElements = targetsRef.current.filter(targetRef => {
+        var _targetRef$current;
+
+        return (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.contains(ev === null || ev === void 0 ? void 0 : ev.target);
+      });
+
+      if (!(clickedElements !== null && clickedElements !== void 0 && clickedElements.length)) {
+        handleClickAway(ev);
+      }
+    };
+
+    document.addEventListener(eventTypeId, fnClickAway);
+    return function cleanup() {
+      document.removeEventListener(eventTypeId, fnClickAway);
+    };
+  }, [handleClickAway, eventTypeId]);
+});

package/lib/components/date/date.component.js

@@ -29,7 +29,7 @@ var _datePicker = _interopRequireDefault(require("./__internal__/date-picker"));
 
 var _dateRange = _interopRequireDefault(require("../date-range/date-range.context"));
 
-var _clickAwayWrapper = _interopRequireDefault(require("../../__internal__/click-away-wrapper"));
+var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -303,11 +303,8 @@ const DateInput = ({
     }
   };
 
-  return /*#__PURE__*/_react.default.createElement(_clickAwayWrapper.default, {
-    handleClickAway: handleClickAway,
-    eventTypeId: "mousedown",
-    targets: [parentRef, pickerRef]
-  }, /*#__PURE__*/_react.default.createElement(_date.default, _extends({
+  (0, _useClickAwayListener.default)([parentRef, pickerRef], handleClickAway, "mousedown");
+  return /*#__PURE__*/_react.default.createElement(_date.default, _extends({
     ref: wrapperRef,
     role: "presentation",
     size: size,
@@ -347,7 +344,7 @@ const DateInput = ({
     ref: pickerRef,
     pickerMouseDown: handlePickerMouseDown,
     open: open
-  })));
+  }));
 };
 
 DateInput.propTypes = { ..._textbox.default.propTypes,

package/lib/components/menu/__internal__/submenu/submenu.component.js

@@ -27,7 +27,7 @@ var _scrollableBlock = _interopRequireDefault(require("../../scrollable-block"))
 
 var _submenu2 = _interopRequireDefault(require("./submenu.context"));
 
-var _clickAwayWrapper = _interopRequireDefault(require("../../../../__internal__/click-away-wrapper"));
+var _useClickAwayListener = _interopRequireDefault(require("../../../../hooks/__internal__/useClickAwayListener"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -232,6 +232,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [characterString]);
+  (0, _useClickAwayListener.default)([submenuRef], handleClickAway);
 
   if (inFullscreenView) {
     return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
@@ -265,10 +266,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     }, child))));
   }
 
-  return /*#__PURE__*/_react.default.createElement(_clickAwayWrapper.default, {
-    handleClickAway: handleClickAway,
-    targets: [submenuRef]
-  }, /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
+  return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
     "data-component": "submenu-wrapper",
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
@@ -306,7 +304,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       updateFocusIndex: setSubmenuFocusIndex,
       itemIndex: child.type === _menuItem2.default ? index : undefined
     }
-  }, child)))));
+  }, child))));
 });
 
 Submenu.propTypes = {

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
+
 var _multiActionButton = require("./multi-action-button.style");
 
 var _button = _interopRequireWildcard(require("../button"));
@@ -125,31 +127,20 @@ const MultiActionButton = ({
       (_additionalButtons$cu = additionalButtons.current[nextIndex].current) === null || _additionalButtons$cu === void 0 ? void 0 : _additionalButtons$cu.focus();
     }
   }, [buttonChildren, hideButtons]);
-  const handleClickOutside = (0, _react.useCallback)(({
-    target
-  }) => {
-    var _ref$current, _buttonContainer$curr;
-
-    if (!((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) && !((_buttonContainer$curr = buttonContainer.current) !== null && _buttonContainer$curr !== void 0 && _buttonContainer$curr.contains(target))) {
-      hideButtons();
-    }
-  }, [hideButtons]);
   const addListeners = (0, _react.useCallback)(() => {
     /* istanbul ignore else */
     if (!listening.current) {
-      document.addEventListener("click", handleClickOutside);
       document.addEventListener("keydown", handleKeyDown);
       listening.current = true;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   const removeListeners = (0, _react.useCallback)(() => {
     /* istanbul ignore else */
     if (listening.current) {
-      document.removeEventListener("click", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
       listening.current = false;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   (0, _react.useEffect)(() => {
     if (showAdditionalButtons) {
       addListeners();
@@ -220,6 +211,7 @@ const MultiActionButton = ({
     ref: buttonContainer
   }, childrenWithProps()));
 
+  (0, _useClickAwayListener.default)([ref], hideButtons);
   return /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledMultiActionButton, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,

package/lib/components/popover-container/popover-container.component.d.ts

@@ -36,7 +36,7 @@ export interface PopoverContainerProps extends PaddingProps {
     /** Sets the popover container dialog header name */
     title?: string;
     /** Callback fires when close icon clicked */
-    onClose?: (ev: React.MouseEvent<HTMLElement>) => void;
+    onClose?: (ev: React.MouseEvent<HTMLElement> | Event) => void;
     /** if `true` the popover-container is open */
     open?: boolean;
     /** Callback fires when open component is clicked */

package/lib/components/popover-container/popover-container.component.js

@@ -19,7 +19,7 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 
 var _utils = require("../../style/utils");
 
-var _clickAwayWrapper = _interopRequireDefault(require("../../__internal__/click-away-wrapper"));
+var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -138,19 +138,15 @@ const PopoverContainer = ({
     onClick: handleCloseButtonClick,
     ref: closeButtonRef,
     "aria-label": closeButtonAriaLabel
-  }; // TODO: Assign proper type after ClickAwayWrapper has been refactored
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  };
 
   const handleClickAway = e => {
     if (!isControlled) setIsOpenInternal(false);
     if (onClose) onClose(e);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_clickAwayWrapper.default, {
-    targets: [ref],
-    handleClickAway: handleClickAway,
-    eventTypeId: "mousedown"
-  }, /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
+  (0, _useClickAwayListener.default)([ref], handleClickAway, "mousedown");
+  return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
     role: "region",
     "aria-labelledby": popoverContainerId,
@@ -178,7 +174,7 @@ const PopoverContainer = ({
   }, (0, _utils.filterStyledSystemPaddingProps)(rest)), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerHeaderStyle, null, /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"
-  }, title), renderCloseComponent(renderCloseComponentProps)), children))));
+  }, title), renderCloseComponent(renderCloseComponentProps)), children)));
 };
 
 exports.PopoverContainer = PopoverContainer;

package/lib/components/split-button/split-button.component.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
+var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
+
 var _icon = _interopRequireDefault(require("../icon"));
 
 var _button = _interopRequireWildcard(require("../button"));
@@ -80,13 +82,6 @@ const SplitButton = ({
     if (isToggleButtonFocused.current) return;
     setShowAdditionalButtons(false);
   }, []);
-  const handleClickOutside = (0, _react.useCallback)(({
-    target
-  }) => {
-    if (!splitButtonNode.current.contains(target) && buttonContainer.current && !buttonContainer.current.contains(target)) {
-      hideButtons();
-    }
-  }, [hideButtons]);
   const handleKeyDown = (0, _react.useCallback)(ev => {
     const numOfChildren = children.length - 1;
     const currentIndex = additionalButtons.current.findIndex(node => node.current === document.activeElement);
@@ -119,19 +114,17 @@ const SplitButton = ({
   const addListeners = (0, _react.useCallback)(() => {
     /* istanbul ignore else */
     if (!listening.current) {
-      document.addEventListener("click", handleClickOutside);
       document.addEventListener("keydown", handleKeyDown);
       listening.current = true;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   const removeListeners = (0, _react.useCallback)(() => {
     /* istanbul ignore else */
     if (listening.current) {
-      document.removeEventListener("click", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
       listening.current = false;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   (0, _react.useEffect)(() => {
     if (showAdditionalButtons) {
       addListeners();
@@ -291,6 +284,7 @@ const SplitButton = ({
     }, childrenWithProps()));
   }
 
+  (0, _useClickAwayListener.default)([splitButtonNode], hideButtons);
   return /*#__PURE__*/_react.default.createElement(_splitButton.default, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,

package/lib/hooks/__internal__/useClickAwayListener/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useClickAwayListener";

package/lib/{__internal__/click-away-wrapper → hooks/__internal__/useClickAwayListener}/index.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _clickAwayWrapper.default;
+    return _useClickAwayListener.default;
   }
 });
 
-var _clickAwayWrapper = _interopRequireDefault(require("./click-away-wrapper.component"));
+var _useClickAwayListener = _interopRequireDefault(require("./useClickAwayListener"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useClickAwayListener/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/hooks/__internal__/useClickAwayListener/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/hooks/__internal__/useClickAwayListener/useClickAwayListener.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: (targets: React.RefObject<HTMLElement>[], handleClickAway: (ev: Event) => void, eventTypeId?: "mousedown" | "click") => void;
+export default _default;

package/lib/hooks/__internal__/useClickAwayListener/useClickAwayListener.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _default = (targets, handleClickAway, eventTypeId = "click") => {
+  const targetsRef = (0, _react.useRef)(targets);
+  targetsRef.current = targets;
+  (0, _react.useEffect)(() => {
+    const fnClickAway = ev => {
+      const clickedElements = targetsRef.current.filter(targetRef => {
+        var _targetRef$current;
+
+        return (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.contains(ev === null || ev === void 0 ? void 0 : ev.target);
+      });
+
+      if (!(clickedElements !== null && clickedElements !== void 0 && clickedElements.length)) {
+        handleClickAway(ev);
+      }
+    };
+
+    document.addEventListener(eventTypeId, fnClickAway);
+    return function cleanup() {
+      document.removeEventListener(eventTypeId, fnClickAway);
+    };
+  }, [handleClickAway, eventTypeId]);
+};
+
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.1.0",
+  "version": "109.1.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {

package/esm/__internal__/click-away-wrapper/click-away-wrapper.component.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-export interface ClickAwayWrapperProps {
-    children: React.ReactNode;
-    handleClickAway: (ev: CustomEvent) => void;
-    eventTypeId?: "mousedown" | "click";
-    targets: React.RefObject<HTMLElement>[];
-}
-declare const ClickAwayWrapper: {
-    ({ children, handleClickAway, eventTypeId, targets, }: ClickAwayWrapperProps): JSX.Element;
-    displayName: string;
-};
-export default ClickAwayWrapper;

package/esm/__internal__/click-away-wrapper/click-away-wrapper.component.js

@@ -1,43 +0,0 @@
-import React, { useEffect } from "react";
-import PropTypes from "prop-types";
-import Events from "../utils/helpers/events";
-
-const ClickAwayWrapper = ({
-  children,
-  handleClickAway,
-  eventTypeId = "click",
-  targets
-}) => {
-  useEffect(() => {
-    const fnClickAway = ev => {
-      const clickedElements = targets.filter(ref => (ref === null || ref === void 0 ? void 0 : ref.current) && Events.composedPath(ev).includes(ref.current));
-
-      if (!clickedElements || !clickedElements.length) {
-        handleClickAway(ev);
-      }
-    };
-
-    document.addEventListener(eventTypeId, fnClickAway);
-    return function cleanup() {
-      document.removeEventListener(eventTypeId, fnClickAway);
-    };
-  }, [handleClickAway, targets, eventTypeId]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-};
-
-ClickAwayWrapper.propTypes = {
-  "children": PropTypes.node,
-  "eventTypeId": PropTypes.oneOf(["click", "mousedown"]),
-  "handleClickAway": PropTypes.func.isRequired,
-  "targets": PropTypes.arrayOf(PropTypes.shape({
-    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
-      if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
-      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error("Expected prop '" + propName + "' to be of type Element");
-      }
-    }]).isRequired
-  })).isRequired
-};
-ClickAwayWrapper.displayName = "ClickAwayWrapper";
-export default ClickAwayWrapper;

package/esm/__internal__/click-away-wrapper/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./click-away-wrapper.component";
-export type { ClickAwayWrapperProps } from "./click-away-wrapper.component";

package/esm/__internal__/click-away-wrapper/index.js

@@ -1 +0,0 @@
-export { default } from "./click-away-wrapper.component";

package/lib/__internal__/click-away-wrapper/click-away-wrapper.component.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-export interface ClickAwayWrapperProps {
-    children: React.ReactNode;
-    handleClickAway: (ev: CustomEvent) => void;
-    eventTypeId?: "mousedown" | "click";
-    targets: React.RefObject<HTMLElement>[];
-}
-declare const ClickAwayWrapper: {
-    ({ children, handleClickAway, eventTypeId, targets, }: ClickAwayWrapperProps): JSX.Element;
-    displayName: string;
-};
-export default ClickAwayWrapper;

package/lib/__internal__/click-away-wrapper/click-away-wrapper.component.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _events = _interopRequireDefault(require("../utils/helpers/events"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
-
-const ClickAwayWrapper = ({
-  children,
-  handleClickAway,
-  eventTypeId = "click",
-  targets
-}) => {
-  (0, _react.useEffect)(() => {
-    const fnClickAway = ev => {
-      const clickedElements = targets.filter(ref => (ref === null || ref === void 0 ? void 0 : ref.current) && _events.default.composedPath(ev).includes(ref.current));
-
-      if (!clickedElements || !clickedElements.length) {
-        handleClickAway(ev);
-      }
-    };
-
-    document.addEventListener(eventTypeId, fnClickAway);
-    return function cleanup() {
-      document.removeEventListener(eventTypeId, fnClickAway);
-    };
-  }, [handleClickAway, targets, eventTypeId]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
-};
-
-ClickAwayWrapper.propTypes = {
-  "children": _propTypes.default.node,
-  "eventTypeId": _propTypes.default.oneOf(["click", "mousedown"]),
-  "handleClickAway": _propTypes.default.func.isRequired,
-  "targets": _propTypes.default.arrayOf(_propTypes.default.shape({
-    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), function (props, propName) {
-      if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
-      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error("Expected prop '" + propName + "' to be of type Element");
-      }
-    }]).isRequired
-  })).isRequired
-};
-ClickAwayWrapper.displayName = "ClickAwayWrapper";
-var _default = ClickAwayWrapper;
-exports.default = _default;

package/lib/__internal__/click-away-wrapper/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./click-away-wrapper.component";
-export type { ClickAwayWrapperProps } from "./click-away-wrapper.component";

package/lib/__internal__/click-away-wrapper/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "../../../esm/__internal__/click-away-wrapper/index.js",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}