carbon-react 109.0.2 → 109.1.2

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.0.2",
+  "version": "109.1.2",
   "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/esm/components/help/help.d.ts

@@ -1,41 +0,0 @@
-import * as React from "react";
-import { IconType } from "components/icon/icon-type";
-import { MarginProps } from "styled-system";
-
-export interface HelpProps extends MarginProps {
-  /** Overrides the default 'as' attribute of the Help component */
-  as?: string;
-  /** The message to be displayed within the tooltip */
-  children?: React.ReactNode;
-  /** [Legacy] A custom class name for the component. */
-  className?: string;
-  /** The unique id of the component (used with aria-describedby for accessibility) */
-  helpId?: string;
-  /** A path for the anchor */
-  href?: string;
-  /** A boolean received from IconWrapper */
-  isFocused?: boolean;
-  /** Overrides the default tabindex of the component */
-  tabIndex?: number | string;
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
-  tooltipBgColor?: string;
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
-  tooltipFontColor?: string;
-  /** Overrides the default flip behaviour of the Tooltip,
-   *  must be an array containing some or all of ["top", "bottom", "left", "right"]
-   * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
-   */
-  tooltipFlipOverrides?: ["top" | "bottom" | "left" | "right"];
-  /** Position of tooltip relative to target */
-  tooltipPosition?: "top" | "bottom" | "left" | "right";
-  /** Id passed to the tooltip container, used for accessibility purposes */
-  tooltipId?: string;
-  /** Help Icon type */
-  type?: IconType;
-  /** Aria label */
-  ariaLabel?: string;
-}
-
-declare function Help(props: HelpProps): JSX.Element;
-
-export default Help;

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"
-}

package/lib/components/help/help.d.ts

@@ -1,41 +0,0 @@
-import * as React from "react";
-import { IconType } from "components/icon/icon-type";
-import { MarginProps } from "styled-system";
-
-export interface HelpProps extends MarginProps {
-  /** Overrides the default 'as' attribute of the Help component */
-  as?: string;
-  /** The message to be displayed within the tooltip */
-  children?: React.ReactNode;
-  /** [Legacy] A custom class name for the component. */
-  className?: string;
-  /** The unique id of the component (used with aria-describedby for accessibility) */
-  helpId?: string;
-  /** A path for the anchor */
-  href?: string;
-  /** A boolean received from IconWrapper */
-  isFocused?: boolean;
-  /** Overrides the default tabindex of the component */
-  tabIndex?: number | string;
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
-  tooltipBgColor?: string;
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
-  tooltipFontColor?: string;
-  /** Overrides the default flip behaviour of the Tooltip,
-   *  must be an array containing some or all of ["top", "bottom", "left", "right"]
-   * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
-   */
-  tooltipFlipOverrides?: ["top" | "bottom" | "left" | "right"];
-  /** Position of tooltip relative to target */
-  tooltipPosition?: "top" | "bottom" | "left" | "right";
-  /** Id passed to the tooltip container, used for accessibility purposes */
-  tooltipId?: string;
-  /** Help Icon type */
-  type?: IconType;
-  /** Aria label */
-  ariaLabel?: string;
-}
-
-declare function Help(props: HelpProps): JSX.Element;
-
-export default Help;