@deque/cauldron-react 6.9.0-canary.453f7da6 → 6.9.0

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 export interface OptionsMenuAlignmentProps {
     align?: 'left' | 'right';
 }
@@ -19,6 +19,21 @@ export interface OptionsMenuProps extends OptionsMenuAlignmentProps {
     show?: boolean;
     children: React.ReactNode;
 }
+interface OptionsMenuState {
+    show: boolean;
+}
 type AllOptionsMenuProps = OptionsMenuProps & React.HTMLAttributes<HTMLLIElement>;
-declare const OptionsMenu: ({ children, className, closeOnSelect, menuRef, trigger, align, onClose, onSelect, ...other }: AllOptionsMenuProps) => React.JSX.Element;
-export default OptionsMenu;
+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 {};

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 OptionsMenuItem: React.ForwardRefExoticComponent<OptionsMenuItemProps & React.RefAttributes<HTMLLIElement>>;
-export default OptionsMenuItem;
+declare const _default: React.ForwardRefExoticComponent<OptionsMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+export default _default;

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

@@ -3,5 +3,24 @@ import { OptionsMenuProps } from './OptionsMenu';
 export interface OptionsMenuListProps extends Omit<OptionsMenuProps, 'trigger'> {
     className?: string;
 }
-declare const OptionsMenuList: ({ children, menuRef, show, className, onClose, onSelect, closeOnSelect, ...other }: OptionsMenuListProps) => React.JSX.Element;
-export default OptionsMenuList;
+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 {};

package/lib/index.js

@@ -841,14 +841,14 @@ function ClickOutsideListener(_a, ref) {
     };
     React.useEffect(function () {
         typeof mouseEvent === 'string' &&
-            document.addEventListener(mouseEvent, handleEvent, true);
+            document.addEventListener(mouseEvent, handleEvent);
         typeof touchEvent === 'string' &&
-            document.addEventListener(touchEvent, handleEvent, true);
+            document.addEventListener(touchEvent, handleEvent);
         return function () {
             typeof mouseEvent === 'string' &&
-                document.removeEventListener(mouseEvent, handleEvent, true);
+                document.removeEventListener(mouseEvent, handleEvent);
             typeof touchEvent === 'string' &&
-                document.removeEventListener(touchEvent, handleEvent, true);
+                document.removeEventListener(touchEvent, handleEvent);
         };
     }, [mouseEvent, touchEvent]);
     return !children
@@ -859,174 +859,216 @@ 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 = 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;
+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;
                 }
-                else if (newIndex === itemCount) {
-                    newIndex = 0;
+                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();
                 }
-                e.preventDefault();
-                setItemIndex(newIndex);
-                break;
+                onSelect(e);
+            }
+            var link = e.target.querySelector('a');
+            if (link) {
+                link.click();
             }
-            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);
         };
-    }, [handleKeyDown]);
-    var handleClick = function (e) {
-        if (menuRefInternal.current &&
-            menuRefInternal.current.contains(e.target)) {
-            if (!e.defaultPrevented && closeOnSelect) {
+        _this.handleClickOutside = function () {
+            var _a = _this.props, _b = _a.onClose, onClose = _b === void 0 ? OptionsMenuList.defaultProps.onClose : _b, show = _a.show;
+            if (show) {
                 onClose();
             }
-            onSelect(e);
+        };
+        _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 });
         }
-        var link = e.target.querySelector('a');
-        if (link) {
-            link.click();
+        else if (prevState.itemIndex !== itemIndex) {
+            // handle up/down arrows
+            (_b = this.itemRefs[itemIndex]) === null || _b === void 0 ? void 0 : _b.focus();
         }
     };
-    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();
-        }
+    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);
     };
-    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)));
-};
+    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 () { }
+    };
+    return OptionsMenuList;
+}(React__default["default"].Component));
 
 var _a$1 = tslib.__read([40], 1), down = _a$1[0];
-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);
-    };
-    var handleClose = function () {
-        var _a;
-        setShow(false);
-        onClose();
-        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+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 handleTriggerKeyDown = function (event) {
-        var which = event.which, target = event.target;
-        if (which === down) {
-            event.preventDefault();
-            target.click();
-        }
+    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'
     };
-    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)));
-};
+    return OptionsMenu;
+}(React.Component));
 
-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);
-        }
+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;
     }
-    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)));
+    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));
 });
-OptionsMenuItem.displayName = 'OptionsMenuItem';
 
 /**
  * The trigger button component to be used as the default component
@@ -4070,10 +4112,7 @@ 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 (e) {
-        if (e.target === targetElement) {
-            return;
-        }
+    var handleClickOutside = function () {
         if (show) {
             handleClosePopover();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.9.0-canary.453f7da6",
+  "version": "6.9.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": "^10.2.3",
+    "focus-trap-react": "8",
     "focusable": "^2.3.0",
     "keyname": "^0.1.0",
     "react-id-generator": "^3.0.1",
@@ -65,9 +65,8 @@
     "postcss-cli": "^7.1.1",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "prop-types": "^15.8.1",
-    "react": "^17",
-    "react-dom": "^17",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "rollup": "^2.23.0",
     "sinon": "^10.0.0",
     "ts-node": "^10.9.2",