@deque/cauldron-react 4.1.0-canary.fcf29799 → 4.2.0-canary.abded4e2

package/README.md

@@ -11,3 +11,9 @@ and pull in the styles:
 ```sh
 $ npm install @deque/cauldron-styles --save
 ```
+
+## server-side rendering
+
+Avoid referencing `window` properties, such as `document`, unless you are sure the code will only be executed in a browser environment. For instance, it is safe to reference `document` in an [Effect Hook](https://reactjs.org/docs/hooks-effect.html) or a lifecycle method like `componentDidMount()`, but not in the `render()` method of a class component.
+
+Ensuring you only reference these objects when it is safe to do so will ensure that library consumers can use Cauldron with platforms that use an SSR engine, such as GatsbyJS and NextJS.

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

@@ -2,6 +2,6 @@
  * GENERATED CODE. DO NOT EDIT DIRECTLY!
  */
 /** IconType represents each valid icon type. */
-export declare 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' | 'close' | 'code' | 'copy' | 'download' | 'exchange' | 'external-link' | 'eye' | 'filter' | 'flag' | 'gears' | 'grid' | 'hamburger-menu' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'new-releases' | 'new' | 'no' | 'pencil' | 'plus' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'sun' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'upload';
+export declare 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' | 'close' | 'code' | 'copy' | 'download' | 'exchange' | 'external-link' | 'eye' | 'filter' | 'flag' | 'gears' | 'grid' | 'hamburger-menu' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'plus' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'sun' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'upload';
 /** iconTypes holds each valid icon type. */
 export declare const iconTypes: string[];

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

@@ -2,6 +2,8 @@ import React from 'react';
 interface LoaderOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: 'large' | 'small';
     label?: string;
+    focusOnInitialRender?: boolean;
+    children?: React.ReactNode;
 }
 declare const LoaderOverlay: React.ForwardRefExoticComponent<LoaderOverlayProps & React.RefAttributes<HTMLDivElement>>;
 export default LoaderOverlay;

package/lib/index.js

@@ -164,6 +164,7 @@ var iconTypes = [
     'lock',
     'magnifying-glass',
     'menu',
+    'minus',
     'new-releases',
     'new',
     'no',
@@ -229,6 +230,7 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/lock.svg': return Promise.resolve().then(function () { return require('./lock.js'); });
     case './icons/magnifying-glass.svg': return Promise.resolve().then(function () { return require('./magnifying-glass.js'); });
     case './icons/menu.svg': return Promise.resolve().then(function () { return require('./menu.js'); });
+    case './icons/minus.svg': return Promise.resolve().then(function () { return require('./minus.js'); });
     case './icons/new-releases.svg': return Promise.resolve().then(function () { return require('./new-releases.js'); });
     case './icons/new.svg': return Promise.resolve().then(function () { return require('./new.js'); });
     case './icons/no.svg': return Promise.resolve().then(function () { return require('./no.js'); });
@@ -446,7 +448,18 @@ var MenuItem = /** @class */ (function (_super) {
 
 var MENU_BREAKPOINT = 1024;
 
-var isWide = function () { return window.innerWidth >= MENU_BREAKPOINT; };
+function isBrowser() {
+    return (typeof window !== 'undefined' &&
+        !!window.document &&
+        !!window.document.createElement);
+}
+
+var isWide = function () {
+    if (!isBrowser()) {
+        return false;
+    }
+    return window.innerWidth >= MENU_BREAKPOINT;
+};
 
 var TopBar = /** @class */ (function (_super) {
     tslib.__extends(TopBar, _super);
@@ -1282,10 +1295,11 @@ var Dialog = /** @class */ (function (_super) {
     };
     Dialog.prototype.render = function () {
         var _this = this;
-        var _a = this.props, dialogRef = _a.dialogRef, forceAction = _a.forceAction, className = _a.className, children = _a.children, closeButtonText = _a.closeButtonText, heading = _a.heading, show = _a.show, _b = _a.portal, portal = _b === void 0 ? document.body : _b, other = tslib.__rest(_a, ["dialogRef", "forceAction", "className", "children", "closeButtonText", "heading", "show", "portal"]);
-        if (!show) {
+        var _a = this.props, dialogRef = _a.dialogRef, forceAction = _a.forceAction, className = _a.className, children = _a.children, closeButtonText = _a.closeButtonText, heading = _a.heading, show = _a.show, other = tslib.__rest(_a, ["dialogRef", "forceAction", "className", "children", "closeButtonText", "heading", "show"]);
+        if (!show || !isBrowser()) {
             return null;
         }
+        var portal = this.props.portal || document.body;
         var close = !forceAction ? (React__default.createElement("button", { className: "Dialog__close", type: "button", onClick: this.close },
             React__default.createElement(Icon, { type: "close", "aria-hidden": "true" }),
             React__default.createElement(Offscreen, null, closeButtonText))) : null;
@@ -1413,6 +1427,9 @@ var SkipLink = /** @class */ (function (_super) {
                 React__default.createElement("span", { className: "SkipLink__item--second" }, targetText))));
     };
     SkipLink.prototype.onClick = function () {
+        if (!isBrowser()) {
+            return;
+        }
         var element = document.querySelector(this.props.target);
         if (element) {
             element.tabIndex = -1;
@@ -1589,7 +1606,7 @@ function Tooltip(_a) {
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute(association, [id, attrText].filter(Boolean).join(' '));
         }
     }, [targetElement, id]);
-    return showTooltip || hideElementOnHidden
+    return (showTooltip || hideElementOnHidden) && isBrowser()
         ? reactDom.createPortal(React__default.createElement("div", tslib.__assign({ id: id, className: classNames('Tooltip', "Tooltip--" + placement, className, {
                 TooltipInfo: variant === 'info',
                 'Tooltip--hidden': !showTooltip && hideElementOnHidden,
@@ -1907,10 +1924,11 @@ var Pointout = /** @class */ (function (_super) {
         var _this = this;
         var _c;
         var _d = this.state, show = _d.show, style = _d.style, offscreenContentFocus = _d.offscreenContentFocus, headingId = _d.headingId;
-        var _e = this.props, heading = _e.heading, ftpoRef = _e.ftpoRef, children = _e.children, noArrow = _e.noArrow, dismissText = _e.dismissText, previousText = _e.previousText, nextText = _e.nextText, showNext = _e.showNext, showPrevious = _e.showPrevious, arrowPosition = _e.arrowPosition, position = _e.position, className = _e.className, target = _e.target, disableOffscreenPointout = _e.disableOffscreenPointout, _f = _e.portal, portal = _f === void 0 ? document.body : _f, previousButtonProps = _e.previousButtonProps, nextButtonProps = _e.nextButtonProps, closeButtonProps = _e.closeButtonProps;
-        if (!show) {
+        var _e = this.props, heading = _e.heading, ftpoRef = _e.ftpoRef, children = _e.children, noArrow = _e.noArrow, dismissText = _e.dismissText, previousText = _e.previousText, nextText = _e.nextText, showNext = _e.showNext, showPrevious = _e.showPrevious, arrowPosition = _e.arrowPosition, position = _e.position, className = _e.className, target = _e.target, disableOffscreenPointout = _e.disableOffscreenPointout, previousButtonProps = _e.previousButtonProps, nextButtonProps = _e.nextButtonProps, closeButtonProps = _e.closeButtonProps;
+        if (!show || !isBrowser()) {
             return null;
         }
+        var portal = this.props.portal || document.body;
         var FTPO = (React__default.createElement("div", { className: classNames(className, 'Pointout', (_a = {
                     'Pointout--no-arrow': noArrow,
                     'Pointout--auto': !!target
@@ -2007,6 +2025,9 @@ var Pointout = /** @class */ (function (_super) {
  */
 var queryAll = function (selector, context) {
     if (context === void 0) { context = document; }
+    if (!isBrowser()) {
+        return [];
+    }
     return Array.prototype.slice.call(context.querySelectorAll(selector));
 };
 
@@ -7979,22 +8000,39 @@ function AxeLoader() {
 }
 
 var LoaderOverlay = React__default.forwardRef(function (_a, ref) {
-    var className = _a.className, variant = _a.variant, label = _a.label, other = tslib.__rest(_a, ["className", "variant", "label"]);
+    var className = _a.className, variant = _a.variant, label = _a.label, children = _a.children, focusOnInitialRender = _a.focusOnInitialRender, other = tslib.__rest(_a, ["className", "variant", "label", "children", "focusOnInitialRender"]);
+    var overlayRef = typeof ref === 'function' || !ref ? React.createRef() : ref;
+    React.useEffect(function () {
+        if (!!focusOnInitialRender && overlayRef.current) {
+            setTimeout(function () {
+                var _a;
+                return (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        return;
+    }, [overlayRef.current]);
+    React.useEffect(function () {
+        if (typeof ref === 'function') {
+            ref(overlayRef.current);
+        }
+    }, [ref]);
     return (React__default.createElement("div", tslib.__assign({ className: classNames('Loader__overlay', className, variant === 'large'
             ? 'Loader__overlay--large'
             : variant === 'small'
                 ? 'Loader__overlay--small'
-                : ''), ref: ref }, other),
+                : ''), ref: overlayRef, tabIndex: -1 }, other),
         React__default.createElement("div", { className: "Loader__overlay__loader" },
             React__default.createElement(Loader, { variant: variant }),
             React__default.createElement(AxeLoader, null)),
         label ? React__default.createElement("span", { className: "Loader__overlay__label" }, label) : null,
-        other.children));
+        children));
 });
 LoaderOverlay.propTypes = {
     className: PropTypes.string,
     variant: PropTypes.oneOf(['large', 'small']),
-    label: PropTypes.string
+    label: PropTypes.string,
+    focusOnInitialRender: PropTypes.bool,
+    children: PropTypes.node
 };
 LoaderOverlay.displayName = 'LoaderOverlay';
 

package/lib/minus.js

@@ -0,0 +1,25 @@
+'use strict';
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+
+var _path;
+
+function _extends() { _extends = Object.assign || 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 SvgMinus = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  overflow: "visible",
+  preserveAspectRatio: "none",
+  viewBox: "0 0 24 24",
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M19 13H5v-2h14v2z",
+  vectorEffect: "non-scaling-stroke",
+  fill: "currentColor"
+})));
+
+exports.default = SvgMinus;

package/lib/utils/is-browser/index.d.ts

@@ -0,0 +1 @@
+export declare function isBrowser(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.1.0-canary.fcf29799",
+  "version": "4.2.0-canary.abded4e2",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"