carbon-react 107.0.0 → 107.1.0

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,43 @@
+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

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

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

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

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

@@ -12,6 +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";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const DateInput = ({
@@ -234,23 +235,6 @@ const DateInput = ({
     }
   };
 
-  useEffect(() => {
-    const fnClosePicker = ev => {
-      if (open && !Events.composedPath(ev).includes(parentRef.current) && !Events.composedPath(ev).includes(pickerRef.current)) {
-        alreadyFocused.current = true;
-        inputRef.current.focus();
-        isBlurBlocked.current = false;
-        inputRef.current.blur();
-        setOpen(false);
-        alreadyFocused.current = false;
-      }
-    };
-
-    document.addEventListener("mousedown", fnClosePicker);
-    return function cleanup() {
-      document.removeEventListener("mousedown", fnClosePicker);
-    };
-  }, [open]);
   useEffect(() => {
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(value, formats);
 
@@ -282,7 +266,22 @@ const DateInput = ({
     return value;
   };
 
-  return /*#__PURE__*/React.createElement(StyledDateInput, _extends({
+  const handleClickAway = () => {
+    if (open) {
+      alreadyFocused.current = true;
+      inputRef.current.focus();
+      isBlurBlocked.current = false;
+      inputRef.current.blur();
+      setOpen(false);
+      alreadyFocused.current = false;
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(ClickAwayWrapper, {
+    handleClickAway: handleClickAway,
+    eventTypeId: "mousedown",
+    targets: [parentRef, pickerRef]
+  }, /*#__PURE__*/React.createElement(StyledDateInput, _extends({
     ref: wrapperRef,
     role: "presentation",
     size: size,
@@ -322,13 +321,13 @@ const DateInput = ({
     ref: pickerRef,
     pickerMouseDown: handlePickerMouseDown,
     open: open
-  }));
+  })));
 };
 
 DateInput.propTypes = { ...Textbox.propTypes,
   ...marginPropTypes,
 
-  /** Pass any props that match the [DayPickerProps](https://react-day-picker.js.org/api/DayPicker)
+  /** Pass any props that match the [DayPickerProps](https://react-day-picker-v7.netlify.app/docs/getting-started/)
    * interface to override default behaviors
    * */
   pickerProps: PropTypes.object,

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

@@ -12,6 +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";
 const Submenu = /*#__PURE__*/React.forwardRef(({
   children,
   className,
@@ -183,12 +184,11 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       }
     }
   }, [submenuFocusIndex, submenuOpen, href, menuContext, arrayOfFormattedChildren, numberOfChildren, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
-  const onClickOutside = useCallback(event => {
-    if (!Events.composedPath(event).includes(submenuRef.current)) {
-      document.removeEventListener("click", onClickOutside);
-      closeSubmenu();
-    }
-  }, [closeSubmenu]);
+
+  const handleClickAway = () => {
+    document.removeEventListener("click", handleClickAway);
+    closeSubmenu();
+  };
 
   const handleClick = event => {
     if (clickToOpen) {
@@ -207,15 +207,6 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [characterString]);
-  useEffect(() => {
-    if (submenuOpen) {
-      document.addEventListener("click", onClickOutside);
-    }
-
-    return function cleanup() {
-      document.removeEventListener("click", onClickOutside);
-    };
-  }, [onClickOutside, submenuOpen]);
 
   if (inFullscreenView) {
     return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
@@ -249,7 +240,10 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     }, child))));
   }
 
-  return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
+  return /*#__PURE__*/React.createElement(ClickAwayWrapper, {
+    handleClickAway: handleClickAway,
+    targets: [submenuRef]
+  }, /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
     "data-component": "submenu-wrapper",
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
@@ -287,7 +281,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       updateFocusIndex: setSubmenuFocusIndex,
       itemIndex: child.type === MenuItem ? index : undefined
     }
-  }, child))));
+  }, child)))));
 });
 Submenu.propTypes = {
   /** Children elements */

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

@@ -8,6 +8,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";
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
 
 const PopoverContainer = ({
@@ -28,6 +29,7 @@ const PopoverContainer = ({
 }) => {
   const isControlled = open !== undefined;
   const [isOpenInternal, setIsOpenInternal] = useState(false);
+  const ref = useRef();
   const closeButtonRef = useRef();
   const openButtonRef = useRef();
   const guid = useRef(createGuid());
@@ -68,10 +70,21 @@ const PopoverContainer = ({
     ref: closeButtonRef,
     ariaLabel: closeButtonAriaLabel
   };
-  return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
+
+  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, {
     "data-component": "popover-container",
     role: "region",
-    "aria-labelledby": popoverContainerId
+    "aria-labelledby": popoverContainerId,
+    ref: ref
   }, renderOpenComponent(renderOpenComponentProps), /*#__PURE__*/React.createElement(Transition, {
     in: isOpen,
     timeout: {
@@ -95,7 +108,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 = { ...paddingPropTypes,

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,59 @@
+"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

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

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _clickAwayWrapper.default;
+  }
+});
+
+var _clickAwayWrapper = _interopRequireDefault(require("./click-away-wrapper.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

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

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

@@ -29,6 +29,8 @@ var _datePicker = _interopRequireDefault(require("./__internal__/date-picker"));
 
 var _dateRange = _interopRequireDefault(require("../date-range/date-range.context"));
 
+var _clickAwayWrapper = _interopRequireDefault(require("../../__internal__/click-away-wrapper"));
+
 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; }
@@ -259,23 +261,6 @@ const DateInput = ({
     }
   };
 
-  (0, _react.useEffect)(() => {
-    const fnClosePicker = ev => {
-      if (open && !_events.default.composedPath(ev).includes(parentRef.current) && !_events.default.composedPath(ev).includes(pickerRef.current)) {
-        alreadyFocused.current = true;
-        inputRef.current.focus();
-        isBlurBlocked.current = false;
-        inputRef.current.blur();
-        setOpen(false);
-        alreadyFocused.current = false;
-      }
-    };
-
-    document.addEventListener("mousedown", fnClosePicker);
-    return function cleanup() {
-      document.removeEventListener("mousedown", fnClosePicker);
-    };
-  }, [open]);
   (0, _react.useEffect)(() => {
     const [matchedFormat, matchedValue] = (0, _utils.findMatchedFormatAndValue)(value, formats);
 
@@ -307,7 +292,22 @@ const DateInput = ({
     return value;
   };
 
-  return /*#__PURE__*/_react.default.createElement(_date.default, _extends({
+  const handleClickAway = () => {
+    if (open) {
+      alreadyFocused.current = true;
+      inputRef.current.focus();
+      isBlurBlocked.current = false;
+      inputRef.current.blur();
+      setOpen(false);
+      alreadyFocused.current = false;
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_clickAwayWrapper.default, {
+    handleClickAway: handleClickAway,
+    eventTypeId: "mousedown",
+    targets: [parentRef, pickerRef]
+  }, /*#__PURE__*/_react.default.createElement(_date.default, _extends({
     ref: wrapperRef,
     role: "presentation",
     size: size,
@@ -347,13 +347,13 @@ const DateInput = ({
     ref: pickerRef,
     pickerMouseDown: handlePickerMouseDown,
     open: open
-  }));
+  })));
 };
 
 DateInput.propTypes = { ..._textbox.default.propTypes,
   ...marginPropTypes,
 
-  /** Pass any props that match the [DayPickerProps](https://react-day-picker.js.org/api/DayPicker)
+  /** Pass any props that match the [DayPickerProps](https://react-day-picker-v7.netlify.app/docs/getting-started/)
    * interface to override default behaviors
    * */
   pickerProps: _propTypes.default.object,

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

@@ -27,6 +27,8 @@ var _scrollableBlock = _interopRequireDefault(require("../../scrollable-block"))
 
 var _submenu2 = _interopRequireDefault(require("./submenu.context"));
 
+var _clickAwayWrapper = _interopRequireDefault(require("../../../../__internal__/click-away-wrapper"));
+
 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; }
@@ -209,12 +211,11 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       }
     }
   }, [submenuFocusIndex, submenuOpen, href, menuContext, arrayOfFormattedChildren, numberOfChildren, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
-  const onClickOutside = (0, _react.useCallback)(event => {
-    if (!_events.default.composedPath(event).includes(submenuRef.current)) {
-      document.removeEventListener("click", onClickOutside);
-      closeSubmenu();
-    }
-  }, [closeSubmenu]);
+
+  const handleClickAway = () => {
+    document.removeEventListener("click", handleClickAway);
+    closeSubmenu();
+  };
 
   const handleClick = event => {
     if (clickToOpen) {
@@ -233,15 +234,6 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [characterString]);
-  (0, _react.useEffect)(() => {
-    if (submenuOpen) {
-      document.addEventListener("click", onClickOutside);
-    }
-
-    return function cleanup() {
-      document.removeEventListener("click", onClickOutside);
-    };
-  }, [onClickOutside, submenuOpen]);
 
   if (inFullscreenView) {
     return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
@@ -275,7 +267,10 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     }, child))));
   }
 
-  return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
+  return /*#__PURE__*/_react.default.createElement(_clickAwayWrapper.default, {
+    handleClickAway: handleClickAway,
+    targets: [submenuRef]
+  }, /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
     "data-component": "submenu-wrapper",
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
@@ -313,7 +308,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       updateFocusIndex: setSubmenuFocusIndex,
       itemIndex: child.type === _menuItem2.default ? index : undefined
     }
-  }, child))));
+  }, child)))));
 });
 
 Submenu.propTypes = {

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

@@ -21,6 +21,8 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 
 var _utils = require("../../style/utils");
 
+var _clickAwayWrapper = _interopRequireDefault(require("../../__internal__/click-away-wrapper"));
+
 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; }
@@ -49,6 +51,7 @@ const PopoverContainer = ({
 }) => {
   const isControlled = open !== undefined;
   const [isOpenInternal, setIsOpenInternal] = (0, _react.useState)(false);
+  const ref = (0, _react.useRef)();
   const closeButtonRef = (0, _react.useRef)();
   const openButtonRef = (0, _react.useRef)();
   const guid = (0, _react.useRef)((0, _guid.default)());
@@ -89,10 +92,21 @@ const PopoverContainer = ({
     ref: closeButtonRef,
     ariaLabel: closeButtonAriaLabel
   };
-  return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
+
+  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, {
     "data-component": "popover-container",
     role: "region",
-    "aria-labelledby": popoverContainerId
+    "aria-labelledby": popoverContainerId,
+    ref: ref
   }, renderOpenComponent(renderOpenComponentProps), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
     in: isOpen,
     timeout: {
@@ -116,7 +130,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))));
 };
 
 PopoverContainer.propTypes = { ...paddingPropTypes,

package/package.json

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