carbon-react 110.0.0 → 110.0.1

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

@@ -43,7 +43,6 @@ const DateInput = ({
   const wrapperRef = useRef();
   const parentRef = useRef();
   const inputRef = useRef();
-  const pickerRef = useRef();
   const alreadyFocused = useRef(false);
   const isBlurBlocked = useRef(false);
   const focusedViaPicker = useRef(false);
@@ -88,6 +87,19 @@ const DateInput = ({
     return ev;
   };
 
+  const handleClickAway = () => {
+    if (open) {
+      alreadyFocused.current = true;
+      inputRef.current.focus();
+      isBlurBlocked.current = false;
+      inputRef.current.blur();
+      setOpen(false);
+      alreadyFocused.current = false;
+    }
+  };
+
+  const handleClickInside = useClickAwayListener(handleClickAway, "mousedown");
+
   const handleChange = ev => {
     isInitialValue.current = false;
     onChange(buildCustomEvent(ev));
@@ -194,6 +206,8 @@ const DateInput = ({
   };
 
   const handleMouseDown = ev => {
+    handleClickInside(ev);
+
     if (disabled || readOnly) {
       return;
     }
@@ -215,8 +229,9 @@ const DateInput = ({
     handleMouseDown(e);
   };
 
-  const handlePickerMouseDown = () => {
+  const handlePickerMouseDown = ev => {
     isBlurBlocked.current = true;
+    handleClickInside(ev);
   };
 
   const assignInput = input => {
@@ -266,18 +281,6 @@ const DateInput = ({
     return value;
   };
 
-  const handleClickAway = () => {
-    if (open) {
-      alreadyFocused.current = true;
-      inputRef.current.focus();
-      isBlurBlocked.current = false;
-      inputRef.current.blur();
-      setOpen(false);
-      alreadyFocused.current = false;
-    }
-  };
-
-  useClickAwayListener([parentRef, pickerRef], handleClickAway, "mousedown");
   return /*#__PURE__*/React.createElement(StyledDateInput, _extends({
     ref: wrapperRef,
     role: "presentation",
@@ -315,7 +318,6 @@ const DateInput = ({
     onDayClick: handleDayClick,
     minDate: minDate,
     maxDate: maxDate,
-    ref: pickerRef,
     pickerMouseDown: handlePickerMouseDown,
     open: open
   }));

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

@@ -39,7 +39,6 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   const [submenuOpen, setSubmenuOpen] = useState(false);
   const [submenuFocusIndex, setSubmenuFocusIndex] = useState(undefined);
   const [characterString, setCharacterString] = useState("");
-  const submenuRef = useRef();
   const formattedChildren = React.Children.map(children, child => {
     if (child.type === ScrollableBlock) {
       return [...child.props.children];
@@ -205,15 +204,15 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [characterString]);
-  useClickAwayListener([submenuRef], handleClickAway);
+  const handleClickInside = useClickAwayListener(handleClickAway);
 
   if (inFullscreenView) {
     return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
       "data-component": "submenu-wrapper",
-      ref: submenuRef,
       inFullscreenView: inFullscreenView,
       menuType: menuContext.menuType,
-      asPassiveItem: asPassiveItem
+      asPassiveItem: asPassiveItem,
+      onClick: handleClickInside
     }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({}, rest, {
       onClick: onClick,
       className: className,
@@ -243,8 +242,8 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     "data-component": "submenu-wrapper",
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
-    ref: submenuRef,
-    isSubmenuOpen: submenuOpen
+    isSubmenuOpen: submenuOpen,
+    onClick: handleClickInside
   }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({}, rest, {
     className: className,
     menuType: menuContext.menuType,

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

@@ -115,10 +115,11 @@ const MultiActionButton = ({
     onKeyDown: handleKeyDown
   }, childrenWithProps()));
 
-  useClickAwayListener([ref], hideButtons);
+  const handleClick = useClickAwayListener(hideButtons);
   return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,
+    onClick: handleClick,
     ref: ref,
     "data-component": "multi-action-button",
     "data-element": dataElement,

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

@@ -92,7 +92,6 @@ const PopoverContainer = ({
 }) => {
   const isControlled = open !== undefined;
   const [isOpenInternal, setIsOpenInternal] = useState(false);
-  const ref = useRef(null);
   const closeButtonRef = useRef(null);
   const openButtonRef = useRef(null);
   const guid = useRef(createGuid());
@@ -143,12 +142,12 @@ const PopoverContainer = ({
     if (onClose) onClose(e);
   };
 
-  useClickAwayListener([ref], handleClickAway, "mousedown");
+  const handleClick = useClickAwayListener(handleClickAway, "mousedown");
   return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
     role: "region",
     "aria-labelledby": popoverContainerId,
-    ref: ref
+    onMouseDown: handleClick
   }, renderOpenComponent(renderOpenComponentProps), /*#__PURE__*/React.createElement(Transition, {
     in: isOpen,
     timeout: {

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

@@ -172,10 +172,11 @@ const SplitButton = ({
     }, childrenWithProps()));
   }
 
-  useClickAwayListener([splitButtonNode], hideButtons);
+  const handleClick = useClickAwayListener(hideButtons);
   return /*#__PURE__*/React.createElement(StyledSplitButton, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,
+    onClick: handleClick,
     ref: splitButtonNode
   }, componentTags(), filterStyledSystemMarginProps(rest)), renderMainButton(), renderAdditionalButtons());
 };

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

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

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

@@ -1,23 +1,25 @@
-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);
-      });
+import { useEffect, useRef, useCallback } from "react"; // Needs to also take Portals into account (so can't just check DOM containment), but ideally without using
+// event.stopPropagation() which could have unexpected and frustrating consequences for consumers.
+// Simple approach taken from https://github.com/facebook/react/issues/10962#issuecomment-444622208
 
-      if (!(clickedElements !== null && clickedElements !== void 0 && clickedElements.length)) {
-        handleClickAway(ev);
-      }
-    };
+export default ((handleClickAway, eventTypeId = "click") => {
+  const clickIsInside = useRef(false);
+  const onDocumentClick = useCallback(ev => {
+    if (clickIsInside.current) {
+      clickIsInside.current = false;
+      return;
+    }
 
-    document.addEventListener(eventTypeId, fnClickAway);
+    handleClickAway(ev);
+  }, [handleClickAway]);
+  const onInsideClick = useCallback(() => {
+    clickIsInside.current = true;
+  }, []);
+  useEffect(() => {
+    document.addEventListener(eventTypeId, onDocumentClick);
     return function cleanup() {
-      document.removeEventListener(eventTypeId, fnClickAway);
+      document.removeEventListener(eventTypeId, onDocumentClick);
     };
-  }, [handleClickAway, eventTypeId]);
+  }, [onDocumentClick, eventTypeId]);
+  return onInsideClick;
 });

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

@@ -69,7 +69,6 @@ const DateInput = ({
   const wrapperRef = (0, _react.useRef)();
   const parentRef = (0, _react.useRef)();
   const inputRef = (0, _react.useRef)();
-  const pickerRef = (0, _react.useRef)();
   const alreadyFocused = (0, _react.useRef)(false);
   const isBlurBlocked = (0, _react.useRef)(false);
   const focusedViaPicker = (0, _react.useRef)(false);
@@ -114,6 +113,19 @@ const DateInput = ({
     return ev;
   };
 
+  const handleClickAway = () => {
+    if (open) {
+      alreadyFocused.current = true;
+      inputRef.current.focus();
+      isBlurBlocked.current = false;
+      inputRef.current.blur();
+      setOpen(false);
+      alreadyFocused.current = false;
+    }
+  };
+
+  const handleClickInside = (0, _useClickAwayListener.default)(handleClickAway, "mousedown");
+
   const handleChange = ev => {
     isInitialValue.current = false;
     onChange(buildCustomEvent(ev));
@@ -220,6 +232,8 @@ const DateInput = ({
   };
 
   const handleMouseDown = ev => {
+    handleClickInside(ev);
+
     if (disabled || readOnly) {
       return;
     }
@@ -241,8 +255,9 @@ const DateInput = ({
     handleMouseDown(e);
   };
 
-  const handlePickerMouseDown = () => {
+  const handlePickerMouseDown = ev => {
     isBlurBlocked.current = true;
+    handleClickInside(ev);
   };
 
   const assignInput = input => {
@@ -292,18 +307,6 @@ const DateInput = ({
     return value;
   };
 
-  const handleClickAway = () => {
-    if (open) {
-      alreadyFocused.current = true;
-      inputRef.current.focus();
-      isBlurBlocked.current = false;
-      inputRef.current.blur();
-      setOpen(false);
-      alreadyFocused.current = false;
-    }
-  };
-
-  (0, _useClickAwayListener.default)([parentRef, pickerRef], handleClickAway, "mousedown");
   return /*#__PURE__*/_react.default.createElement(_date.default, _extends({
     ref: wrapperRef,
     role: "presentation",
@@ -341,7 +344,6 @@ const DateInput = ({
     onDayClick: handleDayClick,
     minDate: minDate,
     maxDate: maxDate,
-    ref: pickerRef,
     pickerMouseDown: handlePickerMouseDown,
     open: open
   }));

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

@@ -63,7 +63,6 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   const [submenuOpen, setSubmenuOpen] = (0, _react.useState)(false);
   const [submenuFocusIndex, setSubmenuFocusIndex] = (0, _react.useState)(undefined);
   const [characterString, setCharacterString] = (0, _react.useState)("");
-  const submenuRef = (0, _react.useRef)();
 
   const formattedChildren = _react.default.Children.map(children, child => {
     if (child.type === _scrollableBlock.default) {
@@ -232,15 +231,15 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [characterString]);
-  (0, _useClickAwayListener.default)([submenuRef], handleClickAway);
+  const handleClickInside = (0, _useClickAwayListener.default)(handleClickAway);
 
   if (inFullscreenView) {
     return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
       "data-component": "submenu-wrapper",
-      ref: submenuRef,
       inFullscreenView: inFullscreenView,
       menuType: menuContext.menuType,
-      asPassiveItem: asPassiveItem
+      asPassiveItem: asPassiveItem,
+      onClick: handleClickInside
     }, /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({}, rest, {
       onClick: onClick,
       className: className,
@@ -270,8 +269,8 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     "data-component": "submenu-wrapper",
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
-    ref: submenuRef,
-    isSubmenuOpen: submenuOpen
+    isSubmenuOpen: submenuOpen,
+    onClick: handleClickInside
   }, /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({}, rest, {
     className: className,
     menuType: menuContext.menuType,

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

@@ -136,10 +136,11 @@ const MultiActionButton = ({
     onKeyDown: handleKeyDown
   }, childrenWithProps()));
 
-  (0, _useClickAwayListener.default)([ref], hideButtons);
+  const handleClick = (0, _useClickAwayListener.default)(hideButtons);
   return /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledMultiActionButton, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,
+    onClick: handleClick,
     ref: ref,
     "data-component": "multi-action-button",
     "data-element": dataElement,

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

@@ -113,7 +113,6 @@ const PopoverContainer = ({
 }) => {
   const isControlled = open !== undefined;
   const [isOpenInternal, setIsOpenInternal] = (0, _react.useState)(false);
-  const ref = (0, _react.useRef)(null);
   const closeButtonRef = (0, _react.useRef)(null);
   const openButtonRef = (0, _react.useRef)(null);
   const guid = (0, _react.useRef)((0, _guid.default)());
@@ -164,12 +163,12 @@ const PopoverContainer = ({
     if (onClose) onClose(e);
   };
 
-  (0, _useClickAwayListener.default)([ref], handleClickAway, "mousedown");
+  const handleClick = (0, _useClickAwayListener.default)(handleClickAway, "mousedown");
   return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
     role: "region",
     "aria-labelledby": popoverContainerId,
-    ref: ref
+    onMouseDown: handleClick
   }, renderOpenComponent(renderOpenComponentProps), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
     in: isOpen,
     timeout: {

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

@@ -201,10 +201,11 @@ const SplitButton = ({
     }, childrenWithProps()));
   }
 
-  (0, _useClickAwayListener.default)([splitButtonNode], hideButtons);
+  const handleClick = (0, _useClickAwayListener.default)(hideButtons);
   return /*#__PURE__*/_react.default.createElement(_splitButton.default, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,
+    onClick: handleClick,
     ref: splitButtonNode
   }, componentTags(), (0, _utils.filterStyledSystemMarginProps)(rest)), renderMainButton(), renderAdditionalButtons());
 };

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

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

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

@@ -7,27 +7,29 @@ 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);
-      });
+// Needs to also take Portals into account (so can't just check DOM containment), but ideally without using
+// event.stopPropagation() which could have unexpected and frustrating consequences for consumers.
+// Simple approach taken from https://github.com/facebook/react/issues/10962#issuecomment-444622208
+var _default = (handleClickAway, eventTypeId = "click") => {
+  const clickIsInside = (0, _react.useRef)(false);
+  const onDocumentClick = (0, _react.useCallback)(ev => {
+    if (clickIsInside.current) {
+      clickIsInside.current = false;
+      return;
+    }
 
-      if (!(clickedElements !== null && clickedElements !== void 0 && clickedElements.length)) {
-        handleClickAway(ev);
-      }
-    };
-
-    document.addEventListener(eventTypeId, fnClickAway);
+    handleClickAway(ev);
+  }, [handleClickAway]);
+  const onInsideClick = (0, _react.useCallback)(() => {
+    clickIsInside.current = true;
+  }, []);
+  (0, _react.useEffect)(() => {
+    document.addEventListener(eventTypeId, onDocumentClick);
     return function cleanup() {
-      document.removeEventListener(eventTypeId, fnClickAway);
+      document.removeEventListener(eventTypeId, onDocumentClick);
     };
-  }, [handleClickAway, eventTypeId]);
+  }, [onDocumentClick, eventTypeId]);
+  return onInsideClick;
 };
 
 exports.default = _default;

package/package.json

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