@deque/cauldron-react 6.9.0 → 6.10.0

package/lib/components/OptionsMenu/OptionsMenu.d.ts

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 export interface OptionsMenuAlignmentProps {
     align?: 'left' | 'right';
 }
@@ -19,21 +19,6 @@ export interface OptionsMenuProps extends OptionsMenuAlignmentProps {
     show?: boolean;
     children: React.ReactNode;
 }
-interface OptionsMenuState {
-    show: boolean;
-}
 type AllOptionsMenuProps = OptionsMenuProps & React.HTMLAttributes<HTMLLIElement>;
-export default class OptionsMenu extends Component<AllOptionsMenuProps, OptionsMenuState> {
-    static defaultProps: {
-        onClose: () => void;
-        onSelect: () => void;
-        align: string;
-    };
-    private triggerRef;
-    constructor(props: AllOptionsMenuProps);
-    toggleMenu: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    handleClose: () => void;
-    handleTriggerKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
-    render(): React.JSX.Element;
-}
-export {};
+declare const OptionsMenu: ({ children, className, closeOnSelect, menuRef, trigger, align, onClose, onSelect, ...other }: AllOptionsMenuProps) => React.JSX.Element;
+export default OptionsMenu;

package/lib/components/OptionsMenu/OptionsMenuItem.d.ts

@@ -5,5 +5,5 @@ export interface OptionsMenuItemProps extends Pick<React.HTMLAttributes<HTMLLIEl
     menuItemRef?: React.Ref<HTMLLIElement>;
     onSelect: (e: React.MouseEvent<HTMLElement>) => void;
 }
-declare const _default: React.ForwardRefExoticComponent<OptionsMenuItemProps & React.RefAttributes<HTMLLIElement>>;
-export default _default;
+declare const OptionsMenuItem: React.ForwardRefExoticComponent<OptionsMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+export default OptionsMenuItem;

package/lib/components/OptionsMenu/OptionsMenuList.d.ts

@@ -3,24 +3,5 @@ import { OptionsMenuProps } from './OptionsMenu';
 export interface OptionsMenuListProps extends Omit<OptionsMenuProps, 'trigger'> {
     className?: string;
 }
-interface OptionsMenuListState {
-    itemIndex: number;
-}
-export default class OptionsMenuList extends React.Component<OptionsMenuListProps, OptionsMenuListState> {
-    static defaultProps: {
-        closeOnSelect: boolean;
-        onSelect: () => void;
-        onClose: () => void;
-    };
-    private itemRefs;
-    private menuRef;
-    constructor(props: OptionsMenuProps);
-    componentDidUpdate(prevProps: OptionsMenuProps, prevState: OptionsMenuListState): void;
-    private handleKeyDown;
-    private handleClick;
-    private handleClickOutside;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): React.JSX.Element;
-}
-export {};
+declare const OptionsMenuList: ({ children, menuRef, show, className, onClose, onSelect, closeOnSelect, ...other }: OptionsMenuListProps) => React.JSX.Element;
+export default OptionsMenuList;

package/lib/index.js

@@ -841,14 +841,14 @@ function ClickOutsideListener(_a, ref) {
     };
     React.useEffect(function () {
         typeof mouseEvent === 'string' &&
-            document.addEventListener(mouseEvent, handleEvent);
+            document.addEventListener(mouseEvent, handleEvent, true);
         typeof touchEvent === 'string' &&
-            document.addEventListener(touchEvent, handleEvent);
+            document.addEventListener(touchEvent, handleEvent, true);
         return function () {
             typeof mouseEvent === 'string' &&
-                document.removeEventListener(mouseEvent, handleEvent);
+                document.removeEventListener(mouseEvent, handleEvent, true);
             typeof touchEvent === 'string' &&
-                document.removeEventListener(touchEvent, handleEvent);
+                document.removeEventListener(touchEvent, handleEvent, true);
         };
     }, [mouseEvent, touchEvent]);
     return !children
@@ -859,216 +859,174 @@ ClickOutsideListener.displayName = 'ClickOutsideListener';
 var ClickOutsideListener$1 = React__default["default"].forwardRef(ClickOutsideListener);
 
 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) {
-    tslib.__extends(OptionsMenuList, _super);
-    function OptionsMenuList(props) {
-        var _this = _super.call(this, props) || this;
-        _this.handleKeyDown = function (e) {
-            var _a = _this.props.onClose, onClose = _a === void 0 ? OptionsMenuList.defaultProps.onClose : _a;
-            var which = e.which, target = e.target;
-            switch (which) {
-                case up:
-                case down$1: {
-                    var itemIndex = _this.state.itemIndex;
-                    var itemCount = _this.itemRefs.length;
-                    var newIndex = which === 38 ? itemIndex - 1 : itemIndex + 1;
-                    // circularity
-                    if (newIndex === -1) {
-                        newIndex = itemCount - 1;
-                    }
-                    else if (newIndex === itemCount) {
-                        newIndex = 0;
-                    }
-                    e.preventDefault();
-                    _this.setState({
-                        itemIndex: newIndex
-                    });
-                    break;
+var OptionsMenuList = function (_a) {
+    var children = _a.children, menuRef = _a.menuRef, show = _a.show, className = _a.className, _b = _a.onClose, onClose = _b === void 0 ? function () { } : _b, // eslint-disable-line @typescript-eslint/no-empty-function
+    _c = _a.onSelect, // eslint-disable-line @typescript-eslint/no-empty-function
+    onSelect = _c === void 0 ? function () { } : _c, // eslint-disable-line @typescript-eslint/no-empty-function
+    _d = _a.closeOnSelect, // eslint-disable-line @typescript-eslint/no-empty-function
+    closeOnSelect = _d === void 0 ? true : _d, other = tslib.__rest(_a, ["children", "menuRef", "show", "className", "onClose", "onSelect", "closeOnSelect"]);
+    var _e = tslib.__read(React.useState(0), 2), itemIndex = _e[0], setItemIndex = _e[1];
+    var itemRefs = React.useRef([]);
+    var menuRefInternal = React.useRef(null);
+    var triggerRef = React.useRef(null);
+    React.useEffect(function () {
+        var _a;
+        if (show && itemRefs.current.length) {
+            // handles opens
+            triggerRef.current = document.activeElement;
+            (_a = itemRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+            setItemIndex(0);
+        }
+        if (!show) {
+            triggerRef.current = null;
+        }
+    }, [show]);
+    React.useEffect(function () {
+        var _a;
+        (_a = itemRefs.current[itemIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [itemIndex]);
+    var handleKeyDown = function (e) {
+        var which = e.which, target = e.target;
+        switch (which) {
+            case up:
+            case down$1: {
+                var itemCount = itemRefs.current.length;
+                var newIndex = which === 38 ? itemIndex - 1 : itemIndex + 1;
+                // circularity
+                if (newIndex === -1) {
+                    newIndex = itemCount - 1;
                 }
-                case esc:
-                    onClose();
-                    break;
-                case enter:
-                case space:
-                    e.preventDefault();
-                    target.click();
-                    break;
-                case tab:
-                    e.preventDefault();
-                    onClose();
-            }
-        };
-        _this.handleClick = function (e) {
-            var _a = _this, menuRef = _a.menuRef, props = _a.props;
-            var onSelect = props.onSelect, _b = props.onClose, onClose = _b === void 0 ? OptionsMenuList.defaultProps.onClose : _b;
-            if (menuRef && menuRef.contains(e.target)) {
-                if (!e.defaultPrevented && props.closeOnSelect) {
-                    onClose();
+                else if (newIndex === itemCount) {
+                    newIndex = 0;
                 }
-                onSelect(e);
-            }
-            var link = e.target.querySelector('a');
-            if (link) {
-                link.click();
+                e.preventDefault();
+                setItemIndex(newIndex);
+                break;
             }
+            case esc:
+                onClose();
+                break;
+            case enter:
+            case space:
+                e.preventDefault();
+                target.click();
+                break;
+            case tab:
+                e.preventDefault();
+                onClose();
+        }
+    };
+    React.useEffect(function () {
+        var currentMenuRef = menuRefInternal.current;
+        currentMenuRef === null || currentMenuRef === void 0 ? void 0 : currentMenuRef.addEventListener('keydown', handleKeyDown);
+        return function () {
+            currentMenuRef === null || currentMenuRef === void 0 ? void 0 : currentMenuRef.removeEventListener('keydown', handleKeyDown);
         };
-        _this.handleClickOutside = function () {
-            var _a = _this.props, _b = _a.onClose, onClose = _b === void 0 ? OptionsMenuList.defaultProps.onClose : _b, show = _a.show;
-            if (show) {
+    }, [handleKeyDown]);
+    var handleClick = function (e) {
+        if (menuRefInternal.current &&
+            menuRefInternal.current.contains(e.target)) {
+            if (!e.defaultPrevented && closeOnSelect) {
                 onClose();
             }
-        };
-        _this.itemRefs = [];
-        _this.state = { itemIndex: 0 };
-        return _this;
-    }
-    OptionsMenuList.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a, _b;
-        var itemIndex = this.state.itemIndex;
-        var show = this.props.show;
-        if (!prevProps.show && show && this.itemRefs.length) {
-            // handles opens
-            (_a = this.itemRefs[0]) === null || _a === void 0 ? void 0 : _a.focus();
-            this.setState({ itemIndex: 0 });
+            onSelect(e);
         }
-        else if (prevState.itemIndex !== itemIndex) {
-            // handle up/down arrows
-            (_b = this.itemRefs[itemIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+        var link = e.target.querySelector('a');
+        if (link) {
+            link.click();
         }
     };
-    OptionsMenuList.prototype.componentDidMount = function () {
-        var _a;
-        // see https://github.com/dequelabs/cauldron-react/issues/150
-        (_a = this.menuRef) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.handleKeyDown);
-    };
-    OptionsMenuList.prototype.componentWillUnmount = function () {
-        var _a;
-        (_a = this.menuRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleKeyDown);
-    };
-    OptionsMenuList.prototype.render = function () {
-        var _this = this;
-        var _a = this, props = _a.props, handleClick = _a.handleClick;
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        var children = props.children, menuRef = props.menuRef, show = props.show, className = props.className; props.onClose; props.onSelect; props.closeOnSelect; var other = tslib.__rest(props, ["children", "menuRef", "show", "className", "onClose", "onSelect", "closeOnSelect"]);
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        var items = React__default["default"].Children.toArray(children).map(function (child, i) {
-            var _a = child.props, className = _a.className, other = tslib.__rest(_a, ["className"]);
-            return React__default["default"].cloneElement(child, tslib.__assign({ key: "list-item-".concat(i), className: classNames__default["default"]('OptionsMenu__list-item', className), tabIndex: -1, role: 'menuitem', ref: function (el) { return (_this.itemRefs[i] = el); } }, other));
-        });
-        // This allows the ClickOutsideListener to only be activated when the menu is
-        // currently open. This prevents an obscure behavior where the activation of a
-        // different menu would cause all menus to close
-        var clickOutsideEventActive = !show ? false : undefined;
-        // 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 },
-            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) {
-                        setRef(menuRef, el);
-                    }
-                } }), items)));
-        /* eslint-enable jsx-a11y/click-events-have-key-events */
-    };
-    OptionsMenuList.defaultProps = {
-        closeOnSelect: true,
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onSelect: function () { },
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onClose: function () { }
+    var handleClickOutside = function (e) {
+        var target = e.target;
+        var triggerElement = triggerRef.current;
+        if (target === triggerElement || (triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.contains(target))) {
+            return;
+        }
+        if (show) {
+            e.preventDefault();
+            onClose();
+        }
     };
-    return OptionsMenuList;
-}(React__default["default"].Component));
+    var items = React__default["default"].Children.toArray(children).map(function (child, i) {
+        var _a = child.props, childClassName = _a.className, childProps = tslib.__rest(_a, ["className"]);
+        return React__default["default"].cloneElement(child, tslib.__assign({ key: "list-item-".concat(i), className: classNames__default["default"]('OptionsMenu__list-item', childClassName), tabIndex: -1, role: 'menuitem', ref: function (el) { return (itemRefs.current[i] = el); } }, childProps));
+    });
+    // This allows the ClickOutsideListener to only be activated when the menu is
+    // currently open. This prevents an obscure behavior where the activation of a
+    // different menu would cause all menus to close
+    var clickOutsideEventActive = !show ? false : undefined;
+    // Key event is being handled in the useEffect above
+    /* 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: 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) {
+                menuRefInternal.current = el;
+                if (menuRef) {
+                    setRef(menuRef, el);
+                }
+            } }), items)));
+};
 
 var _a$1 = tslib.__read([40], 1), down = _a$1[0];
-var OptionsMenu = /** @class */ (function (_super) {
-    tslib.__extends(OptionsMenu, _super);
-    function OptionsMenu(props) {
-        var _this = _super.call(this, props) || this;
-        _this.toggleMenu = function (event) {
-            _this.setState(function (_a) {
-                var show = _a.show;
-                return ({ show: !show });
-            });
-        };
-        _this.handleClose = function () {
-            var _a;
-            var _b = _this.props.onClose, onClose = _b === void 0 ? OptionsMenu.defaultProps.onClose : _b;
-            _this.setState({ show: false });
-            onClose();
-            (_a = _this.triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        };
-        _this.handleTriggerKeyDown = function (event) {
-            var which = event.which, target = event.target;
-            if (which === down) {
-                event.preventDefault();
-                target.click();
-            }
-        };
-        _this.state = { show: false };
-        _this.triggerRef = React__default["default"].createRef();
-        return _this;
-    }
-    OptionsMenu.prototype.render = function () {
-        var _a = this, toggleMenu = _a.toggleMenu, triggerRef = _a.triggerRef, handleTriggerKeyDown = _a.handleTriggerKeyDown;
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        var _b = this.props, children = _b.children, className = _b.className; _b.closeOnSelect; var menuRef = _b.menuRef, trigger = _b.trigger, align = _b.align; _b.onClose; var other = tslib.__rest(_b, ["children", "className", "closeOnSelect", "menuRef", "trigger", "align", "onClose"]);
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        var show = this.state.show;
-        return (React__default["default"].createElement(OptionsMenuWrapper, { align: align, className: className },
-            trigger &&
-                trigger({
-                    onClick: toggleMenu,
-                    'aria-expanded': show,
-                    ref: triggerRef,
-                    onKeyDown: handleTriggerKeyDown
-                }),
-            React__default["default"].createElement(OptionsMenuList, tslib.__assign({ show: show, menuRef: function (el) {
-                    if (menuRef) {
-                        setRef(menuRef, el);
-                    }
-                }, onClose: this.handleClose }, other), children)));
+var OptionsMenu = function (_a) {
+    var children = _a.children, className = _a.className; _a.closeOnSelect; var menuRef = _a.menuRef, trigger = _a.trigger, _b = _a.align, align = _b === void 0 ? 'right' : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, // eslint-disable-line @typescript-eslint/no-empty-function
+    _d = _a.onSelect, // eslint-disable-line @typescript-eslint/no-empty-function
+    onSelect = _d === void 0 ? function () { } : _d, // eslint-disable-line @typescript-eslint/no-empty-function
+    other = tslib.__rest(_a, ["children", "className", "closeOnSelect", "menuRef", "trigger", "align", "onClose", "onSelect"]);
+    var _e = tslib.__read(React.useState(false), 2), show = _e[0], setShow = _e[1];
+    var triggerRef = React.useRef(null);
+    var toggleMenu = function (e) {
+        if (e.defaultPrevented) {
+            return;
+        }
+        setShow(!show);
     };
-    OptionsMenu.defaultProps = {
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onClose: function () { },
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onSelect: function () { },
-        align: 'right'
+    var handleClose = function () {
+        var _a;
+        setShow(false);
+        onClose();
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    return OptionsMenu;
-}(React.Component));
+    var handleTriggerKeyDown = function (event) {
+        var which = event.which, target = event.target;
+        if (which === down) {
+            event.preventDefault();
+            target.click();
+        }
+    };
+    return (React__default["default"].createElement(OptionsMenuWrapper, { align: align, className: className },
+        trigger &&
+            trigger({
+                onClick: toggleMenu,
+                'aria-expanded': show,
+                ref: triggerRef,
+                onKeyDown: handleTriggerKeyDown
+            }),
+        React__default["default"].createElement(OptionsMenuList, tslib.__assign({ show: show, menuRef: function (el) {
+                if (menuRef) {
+                    setRef(menuRef, el);
+                }
+            }, onClose: handleClose, onSelect: onSelect }, other), children)));
+};
 
-var OptionsMenuItemComponent = /** @class */ (function (_super) {
-    tslib.__extends(OptionsMenuItemComponent, _super);
-    function OptionsMenuItemComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.handleClick = function (event) {
-            var _a = _this.props, disabled = _a.disabled, onSelect = _a.onSelect;
-            if (!disabled) {
-                onSelect(event);
-            }
-        };
-        return _this;
+function OptionsMenuItemComponent(_a) {
+    var disabled = _a.disabled, className = _a.className, menuItemRef = _a.menuItemRef, _b = _a.onSelect, onSelect = _b === void 0 ? function () { } : _b, // eslint-disable-line @typescript-eslint/no-empty-function
+    other = tslib.__rest(_a, ["disabled", "className", "menuItemRef", "onSelect"]);
+    function handleClick(event) {
+        if (!disabled) {
+            onSelect(event);
+        }
     }
-    OptionsMenuItemComponent.prototype.render = function () {
-        var _a = this, handleClick = _a.handleClick, props = _a.props;
-        var menuItemRef = props.menuItemRef, disabled = props.disabled; props.onSelect; var other = tslib.__rest(props, ["menuItemRef", "disabled", "onSelect"]);
-        return (
-        // keydown happens in OptionsMenu which proxies to click
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        React__default["default"].createElement("li", tslib.__assign({ role: "menuitem", ref: menuItemRef, "aria-disabled": disabled, onClick: handleClick }, other)));
-    };
-    OptionsMenuItemComponent.defaultProps = {
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onSelect: function () { }
-    };
-    return OptionsMenuItemComponent;
-}(React__default["default"].Component));
-var OptionsMenuItem = React__default["default"].forwardRef(function OptionsMenuItem(props, ref) {
-    return React__default["default"].createElement(OptionsMenuItemComponent, tslib.__assign({ menuItemRef: ref }, props));
+    return (
+    // keydown happens in OptionsMenu which proxies to click
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    React__default["default"].createElement("li", tslib.__assign({ role: "menuitem", ref: menuItemRef, "aria-disabled": disabled, onClick: handleClick, className: className }, other)));
+}
+var OptionsMenuItem = React.forwardRef(function (_a, ref) {
+    var props = tslib.__rest(_a, []);
+    return (React__default["default"].createElement(OptionsMenuItemComponent, tslib.__assign({ menuItemRef: ref }, props)));
 });
+OptionsMenuItem.displayName = 'OptionsMenuItem';
 
 /**
  * The trigger button component to be used as the default component
@@ -4112,7 +4070,10 @@ var Popover = React.forwardRef(function (_a, ref) {
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute('aria-haspopup', 'true');
         }
     }, [targetElement, id, show]);
-    var handleClickOutside = function () {
+    var handleClickOutside = function (e) {
+        if (e.target === targetElement) {
+            return;
+        }
         if (show) {
             handleClosePopover();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.9.0",
+  "version": "6.10.0",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@popperjs/core": "^2.5.4",
     "classnames": "^2.2.6",
-    "focus-trap-react": "8",
+    "focus-trap-react": "^10.2.3",
     "focusable": "^2.3.0",
     "keyname": "^0.1.0",
     "react-id-generator": "^3.0.1",
@@ -65,8 +65,9 @@
     "postcss-cli": "^7.1.1",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "prop-types": "^15.8.1",
+    "react": "^17",
+    "react-dom": "^17",
     "rollup": "^2.23.0",
     "sinon": "^10.0.0",
     "ts-node": "^10.9.2",