@deque/cauldron-react 6.7.0-canary.8f770f32 → 6.7.0-canary.8ff3885e

package/lib/components/ClickOutsideListener/index.d.ts

@@ -4,7 +4,23 @@ export interface ClickOutsideListenerProps<T extends HTMLElement = HTMLElement>
     onClickOutside: (e: MouseEvent | TouchEvent) => void;
     mouseEvent?: 'mousedown' | 'click' | 'mouseup' | false;
     touchEvent?: 'touchstart' | 'touchend' | false;
-    target?: T | React.RefObject<T> | React.MutableRefObject<T>;
+    target?: T;
+}
+export default class ClickOutsideListener extends React.Component<ClickOutsideListenerProps> {
+    static displayName: string;
+    static defaultProps: {
+        mouseEvent: string;
+        touchEvent: string;
+    };
+    private nodeRef;
+    handleEvent: (event: MouseEvent | TouchEvent) => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ClickOutsideListenerProps): void;
+    componentWillUnmount(): void;
+    private attachEventListeners;
+    private removeEventListeners;
+    resolveRef: (node: HTMLElement) => void;
+    render(): React.FunctionComponentElement<{
+        ref: (node: HTMLElement) => void;
+    }> | null;
 }
-declare const _default: React.ForwardRefExoticComponent<ClickOutsideListenerProps<HTMLElement> & React.RefAttributes<HTMLElement>>;
-export default _default;

package/lib/index.js

@@ -791,55 +791,74 @@ var OptionsMenuWrapper = function (_a) {
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('OptionsMenu', menuAlignment(align), className) }, other)));
 };
 
-function ClickOutsideListener(_a, ref) {
-    var children = _a.children, _b = _a.mouseEvent, mouseEvent = _b === void 0 ? 'click' : _b, _c = _a.touchEvent, touchEvent = _c === void 0 ? 'touchend' : _c, target = _a.target, _d = _a.onClickOutside, onClickOutside = _d === void 0 ? function () { return null; } : _d;
-    var childElementRef = React.useRef();
-    var handleEvent = function (event) {
-        if (event.defaultPrevented) {
-            return;
-        }
-        var eventTarget = event.target;
-        if (target && (target instanceof HTMLElement || 'current' in target)) {
-            var elementTarget = target instanceof HTMLElement ? target : target.current;
-            if (!(elementTarget === null || elementTarget === void 0 ? void 0 : elementTarget.contains(eventTarget))) {
+var ClickOutsideListener = /** @class */ (function (_super) {
+    tslib.__extends(ClickOutsideListener, _super);
+    function ClickOutsideListener() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handleEvent = function (event) {
+            var _a = _this, nodeRef = _a.nodeRef, props = _a.props;
+            var onClickOutside = props.onClickOutside, target = props.target;
+            if (event.defaultPrevented) {
+                return;
+            }
+            var eventTarget = event.target;
+            if ((target && !target.contains(eventTarget)) ||
+                (nodeRef && !nodeRef.contains(eventTarget))) {
                 onClickOutside(event);
             }
-            // If a target is passed in via a prop, we defer to utilizing that
-            // target instead of a child element target
-            return;
-        }
-        if (childElementRef.current &&
-            !childElementRef.current.contains(eventTarget)) {
-            onClickOutside(event);
-        }
-    };
-    var resolveRef = function (node) {
-        childElementRef.current = node;
-        // Ref for this component should pass-through to the child node
-        setRef(ref, node);
-        // If child has its own ref, we want to update
-        // its ref with the newly cloned node
-        var childRef = children.ref;
-        setRef(childRef, node);
-    };
-    React.useEffect(function () {
-        typeof mouseEvent === 'string' &&
-            document.addEventListener(mouseEvent, handleEvent);
-        typeof touchEvent === 'string' &&
-            document.addEventListener(touchEvent, handleEvent);
-        return function () {
+        };
+        _this.attachEventListeners = function () {
+            var _a = _this.props, mouseEvent = _a.mouseEvent, touchEvent = _a.touchEvent;
             typeof mouseEvent === 'string' &&
-                document.removeEventListener(mouseEvent, handleEvent);
+                document.addEventListener(mouseEvent, _this.handleEvent);
             typeof touchEvent === 'string' &&
-                document.removeEventListener(touchEvent, handleEvent);
+                document.addEventListener(touchEvent, _this.handleEvent);
         };
-    }, [mouseEvent, touchEvent]);
-    return !children
-        ? null
-        : React__default["default"].cloneElement(children, { ref: resolveRef });
-}
-ClickOutsideListener.displayName = 'ClickOutsideListener';
-var ClickOutsideListener$1 = React__default["default"].forwardRef(ClickOutsideListener);
+        _this.removeEventListeners = function (mouseEvent, touchEvent) {
+            typeof mouseEvent === 'string' &&
+                document.removeEventListener(mouseEvent, _this.handleEvent);
+            typeof touchEvent === 'string' &&
+                document.removeEventListener(touchEvent, _this.handleEvent);
+        };
+        _this.resolveRef = function (node) {
+            _this.nodeRef = node;
+            // If child has its own ref, we want to update
+            // its ref with the newly cloned node
+            var ref = _this.props.children.ref;
+            setRef(ref, node);
+        };
+        return _this;
+    }
+    ClickOutsideListener.prototype.componentDidMount = function () {
+        this.attachEventListeners();
+    };
+    ClickOutsideListener.prototype.componentDidUpdate = function (prevProps) {
+        var _a = this.props, mouseEvent = _a.mouseEvent, touchEvent = _a.touchEvent;
+        if (prevProps.mouseEvent !== mouseEvent ||
+            prevProps.touchEvent !== touchEvent) {
+            this.removeEventListeners(prevProps.mouseEvent, prevProps.touchEvent);
+            this.attachEventListeners();
+        }
+    };
+    ClickOutsideListener.prototype.componentWillUnmount = function () {
+        var _a = this.props, mouseEvent = _a.mouseEvent, touchEvent = _a.touchEvent;
+        this.removeEventListeners(mouseEvent, touchEvent);
+    };
+    ClickOutsideListener.prototype.render = function () {
+        var _a = this, props = _a.props, resolveRef = _a.resolveRef;
+        return !props.children
+            ? null
+            : React__default["default"].cloneElement(props.children, {
+                ref: resolveRef
+            });
+    };
+    ClickOutsideListener.displayName = 'ClickOutsideListener';
+    ClickOutsideListener.defaultProps = {
+        mouseEvent: 'click',
+        touchEvent: 'touchend'
+    };
+    return ClickOutsideListener;
+}(React__default["default"].Component));
 
 var _a$2 = tslib.__read([38, 40, 9, 13, 32, 27], 6), up = _a$2[0], down$1 = _a$2[1], tab = _a$2[2], enter = _a$2[3], space = _a$2[4], esc = _a$2[5];
 var OptionsMenuList = /** @class */ (function (_super) {
@@ -945,7 +964,7 @@ var OptionsMenuList = /** @class */ (function (_super) {
         // Key event is being handled in componentDidMount
         /* eslint-disable jsx-a11y/click-events-have-key-events */
         /* eslint-disable jsx-a11y/role-supports-aria-props */
-        return (React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: this.handleClickOutside, mouseEvent: clickOutsideEventActive, touchEvent: clickOutsideEventActive },
+        return (React__default["default"].createElement(ClickOutsideListener, { onClickOutside: this.handleClickOutside, mouseEvent: clickOutsideEventActive, touchEvent: clickOutsideEventActive },
             React__default["default"].createElement("ul", tslib.__assign({}, other, { className: classNames__default["default"]('OptionsMenu__list', className), "aria-expanded": show, role: "menu", onClick: handleClick, ref: function (el) {
                     _this.menuRef = el;
                     if (menuRef) {
@@ -1293,7 +1312,7 @@ var SideBar = /** @class */ (function (_super) {
         var _b = this.props, children = _b.children, className = _b.className, show = _b.show; _b.onDismiss; var navProps = _b.navProps, other = tslib.__rest(_b, ["children", "className", "show", "onDismiss", "navProps"]);
         /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
         return (React__default["default"].createElement(React.Fragment, null,
-            React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: this.handleClickOutside },
+            React__default["default"].createElement(ClickOutsideListener, { onClickOutside: this.handleClickOutside },
                 React__default["default"].createElement("nav", tslib.__assign({}, navProps),
                     React__default["default"].createElement("ul", tslib.__assign({ className: classNames__default["default"]('SideBar', className, animateClass) }, other, { ref: this.navList, onKeyDown: this.onKeyDown }), children))),
             React__default["default"].createElement(Scrim, { show: !wide && show })));
@@ -1432,7 +1451,7 @@ var Dialog = /** @class */ (function (_super) {
                 escapeDeactivates: false,
                 fallbackFocus: '.Dialog__heading'
             } },
-            React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: this.handleClickOutside },
+            React__default["default"].createElement(ClickOutsideListener, { onClickOutside: this.handleClickOutside },
                 React__default["default"].createElement("div", tslib.__assign({ role: "dialog", className: classNames__default["default"]('Dialog', className, {
                         'Dialog--show': show
                     }), ref: function (el) {
@@ -3309,7 +3328,7 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
                     allowOutsideClick: true,
                     fallbackFocus: columnLeftRef.current
                 }, containerElements: [columnLeftRef.current] }),
-            React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside, target: columnLeftRef.current }),
+            React__default["default"].createElement(ClickOutsideListener, { onClickOutside: handleClickOutside, target: columnLeftRef.current }),
             isCollapsed ? null : skipLink,
             showPanel ? ColumnLeftComponent : null,
             ColumnRightComponent)));
@@ -4126,7 +4145,7 @@ var Popover = React.forwardRef(function (_a, ref) {
             allowOutsideClick: true,
             fallbackFocus: '.Popover__borderLeft'
         } },
-        React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside },
+        React__default["default"].createElement(ClickOutsideListener, { onClickOutside: handleClickOutside },
             React__default["default"].createElement("div", tslib.__assign({ id: id, className: classNames__default["default"]('Popover', "Popover--".concat(placement), className, {
                     'Popover--hidden': !show,
                     'Popover--prompt': variant === 'prompt'
@@ -4281,7 +4300,7 @@ exports.BreadcrumbItem = BreadcrumbItem;
 exports.BreadcrumbLink = BreadcrumbLink;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
-exports.ClickOutsideListener = ClickOutsideListener$1;
+exports.ClickOutsideListener = ClickOutsideListener;
 exports.Code = Code;
 exports.ColumnGroupHeader = ColumnGroupHeader;
 exports.ColumnHeader = ColumnHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.7.0-canary.8f770f32",
+  "version": "6.7.0-canary.8ff3885e",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",