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

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/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

@@ -446,7 +446,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 +1293,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 +1425,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 +1604,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 +1922,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 +2023,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 +7998,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/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",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"
@@ -124,4 +124,4 @@
       "\\.svg$": "<rootDir>/__tests__/svgMock.js"
     }
   }
-}
+}