@deque/cauldron-react 6.6.1-canary.db04cb91 → 6.7.0-canary.0fa62fa5

package/lib/cauldron.css

@@ -39,6 +39,12 @@
   }
 }
 
+a.Button--primary,
+a.Button--secondary,
+a.Button--thin {
+  font-weight: var(--font-weight-medium);
+}
+
 a.Button--primary,
 a.Button--secondary {
   text-decoration: none;

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

@@ -4,23 +4,7 @@ export interface ClickOutsideListenerProps<T extends HTMLElement = HTMLElement>
     onClickOutside: (e: MouseEvent | TouchEvent) => void;
     mouseEvent?: 'mousedown' | 'click' | 'mouseup' | false;
     touchEvent?: 'touchstart' | 'touchend' | false;
-    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;
+    target?: T | React.RefObject<T> | React.MutableRefObject<T>;
 }
+declare const _default: React.ForwardRefExoticComponent<ClickOutsideListenerProps<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export default _default;

package/lib/components/Icon/types.d.ts

@@ -2,6 +2,6 @@
  * GENERATED CODE. DO NOT EDIT DIRECTLY!
  */
 /** IconType represents each valid icon type. */
-export type IconType = 'add-user' | 'arrow-circle-up' | 'arrow-circle-down' | 'arrow-circle-left' | 'arrow-circle-right' | 'arrow-up' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrows-alt' | 'bolt' | 'caution' | 'check-circle' | 'check-shield' | 'check-solid' | 'check' | 'checkbox-checked' | 'checkbox-unchecked' | 'chevron-double-up' | 'chevron-double-down' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'clipboard' | 'clock' | 'close' | 'code' | 'copy' | 'download' | 'dropper' | 'exchange' | 'export-solid' | 'external-link' | 'eye' | 'filter-solid' | 'filter' | 'flag' | 'gears' | 'github' | 'grid' | 'hamburger-menu' | 'hashtag' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'link' | 'linkedin' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'person-running' | 'play' | 'plus' | 'question-circle-alt' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle-square' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share-nodes' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'step-back' | 'step-forward' | 'sun' | 'table-sort-ascending' | 'table-sort-descending' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'twitter' | 'upload';
+export type IconType = 'add-user' | 'arrow-circle-up' | 'arrow-circle-down' | 'arrow-circle-left' | 'arrow-circle-right' | 'arrow-up' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrows-alt' | 'bolt' | 'caution' | 'check-circle' | 'check-shield' | 'check-solid' | 'check' | 'checkbox-checked' | 'checkbox-unchecked' | 'chevron-double-up' | 'chevron-double-down' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'clipboard' | 'clock' | 'close' | 'code' | 'copy' | 'download' | 'dropper' | 'exchange' | 'export-solid' | 'external-link' | 'eye' | 'filter-solid' | 'filter' | 'flag' | 'gears' | 'github' | 'grid' | 'hamburger-menu' | 'hashtag' | 'highlight' | 'images' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'link' | 'linkedin' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'person-running' | 'play' | 'plus' | 'question-circle-alt' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle-square' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share-nodes' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'step-back' | 'step-forward' | 'sun' | 'table-sort-ascending' | 'table-sort-descending' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'twitter' | 'upload';
 /** iconTypes holds each valid icon type. */
 export declare const iconTypes: string[];

package/lib/images.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n["default"] = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const SvgImages = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 576 512",
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M160 32c-35.3 0-64 28.7-64 64v224c0 35.3 28.7 64 64 64h352c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H160zm236 106.7 96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320H200c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84c4.5-6.6 12-10.6 20-10.6s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1-64 0zm-144-8c0-13.3-10.7-24-24-24S0 106.7 0 120v224c0 75.1 60.9 136 136 136h320c13.3 0 24-10.7 24-24s-10.7-24-24-24H136c-48.6 0-88-39.4-88-88V120z",
+  fill: "currentColor"
+})));
+
+exports["default"] = SvgImages;

package/lib/index.js

@@ -149,6 +149,7 @@ var iconTypes = [
     'hamburger-menu',
     'hashtag',
     'highlight',
+    'images',
     'info-circle-alt',
     'info-circle',
     'info-square',
@@ -234,6 +235,7 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/hamburger-menu.svg': return Promise.resolve().then(function () { return require('./hamburger-menu.js'); });
     case './icons/hashtag.svg': return Promise.resolve().then(function () { return require('./hashtag.js'); });
     case './icons/highlight.svg': return Promise.resolve().then(function () { return require('./highlight.js'); });
+    case './icons/images.svg': return Promise.resolve().then(function () { return require('./images.js'); });
     case './icons/info-circle-alt.svg': return Promise.resolve().then(function () { return require('./info-circle-alt.js'); });
     case './icons/info-circle.svg': return Promise.resolve().then(function () { return require('./info-circle.js'); });
     case './icons/info-square.svg': return Promise.resolve().then(function () { return require('./info-square.js'); });
@@ -789,74 +791,55 @@ var OptionsMenuWrapper = function (_a) {
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('OptionsMenu', menuAlignment(align), className) }, other)));
 };
 
-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))) {
+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))) {
                 onClickOutside(event);
             }
-        };
-        _this.attachEventListeners = function () {
-            var _a = _this.props, mouseEvent = _a.mouseEvent, touchEvent = _a.touchEvent;
-            typeof mouseEvent === 'string' &&
-                document.addEventListener(mouseEvent, _this.handleEvent);
-            typeof touchEvent === 'string' &&
-                document.addEventListener(touchEvent, _this.handleEvent);
-        };
-        _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();
+            // 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);
         }
     };
-    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'
+    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);
     };
-    return ClickOutsideListener;
-}(React__default["default"].Component));
+    React.useEffect(function () {
+        typeof mouseEvent === 'string' &&
+            document.addEventListener(mouseEvent, handleEvent);
+        typeof touchEvent === 'string' &&
+            document.addEventListener(touchEvent, handleEvent);
+        return function () {
+            typeof mouseEvent === 'string' &&
+                document.removeEventListener(mouseEvent, handleEvent);
+            typeof touchEvent === 'string' &&
+                document.removeEventListener(touchEvent, handleEvent);
+        };
+    }, [mouseEvent, touchEvent]);
+    return !children
+        ? null
+        : React__default["default"].cloneElement(children, { ref: resolveRef });
+}
+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) {
@@ -962,7 +945,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, { onClickOutside: this.handleClickOutside, mouseEvent: clickOutsideEventActive, touchEvent: clickOutsideEventActive },
+        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) {
@@ -1310,7 +1293,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, { onClickOutside: this.handleClickOutside },
+            React__default["default"].createElement(ClickOutsideListener$1, { 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 })));
@@ -1449,7 +1432,7 @@ var Dialog = /** @class */ (function (_super) {
                 escapeDeactivates: false,
                 fallbackFocus: '.Dialog__heading'
             } },
-            React__default["default"].createElement(ClickOutsideListener, { onClickOutside: this.handleClickOutside },
+            React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: this.handleClickOutside },
                 React__default["default"].createElement("div", tslib.__assign({ role: "dialog", className: classNames__default["default"]('Dialog', className, {
                         'Dialog--show': show
                     }), ref: function (el) {
@@ -3326,7 +3309,7 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
                     allowOutsideClick: true,
                     fallbackFocus: columnLeftRef.current
                 }, containerElements: [columnLeftRef.current] }),
-            React__default["default"].createElement(ClickOutsideListener, { onClickOutside: handleClickOutside, target: columnLeftRef.current }),
+            React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside, target: columnLeftRef.current }),
             isCollapsed ? null : skipLink,
             showPanel ? ColumnLeftComponent : null,
             ColumnRightComponent)));
@@ -4143,7 +4126,7 @@ var Popover = React.forwardRef(function (_a, ref) {
             allowOutsideClick: true,
             fallbackFocus: '.Popover__borderLeft'
         } },
-        React__default["default"].createElement(ClickOutsideListener, { onClickOutside: handleClickOutside },
+        React__default["default"].createElement(ClickOutsideListener$1, { 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'
@@ -4298,7 +4281,7 @@ exports.BreadcrumbItem = BreadcrumbItem;
 exports.BreadcrumbLink = BreadcrumbLink;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
-exports.ClickOutsideListener = ClickOutsideListener;
+exports.ClickOutsideListener = ClickOutsideListener$1;
 exports.Code = Code;
 exports.ColumnGroupHeader = ColumnGroupHeader;
 exports.ColumnHeader = ColumnHeader;

package/package.json

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