@deque/cauldron-react 4.4.0 → 4.5.0-canary.0c764a21

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

@@ -1,14 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
     variant?: 'large' | 'small';
 }
-declare function Loader({ className, variant, label, ...props }: LoaderProps): JSX.Element;
-declare namespace Loader {
-    var propTypes: {
-        className: PropTypes.Requireable<string>;
-    };
-    var displayName: string;
-}
+declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
 export default Loader;

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

@@ -1,22 +1,13 @@
-import { HTMLAttributes, ReactElement, ReactNode } from 'react';
-import PropTypes from 'prop-types';
+import React, { HTMLAttributes, ReactNode } from 'react';
 interface PanelProps extends HTMLAttributes<HTMLElement> {
     children: ReactNode;
-    heading?: ReactElement<any> | {
+    heading?: ReactNode | {
         id?: string;
-        text: ReactElement<any>;
+        text: ReactNode;
         level: number | undefined;
     };
     collapsed?: boolean;
     className?: string;
 }
-declare const Panel: {
-    ({ children, collapsed, className, heading, ...other }: PanelProps): JSX.Element;
-    displayName: string;
-    propTypes: {
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        heading: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        className: PropTypes.Requireable<string>;
-    };
-};
+declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLElement>>;
 export default Panel;

package/lib/index.js

@@ -2223,7 +2223,7 @@ Link.propTypes = {
 };
 Link.displayName = 'Link';
 
-function Loader(_a) {
+var Loader = React__default.forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.variant, variant = _b === void 0 ? 'small' : _b, label = _a.label, props = tslib.__rest(_a, ["className", "variant", "label"]);
     if (label === null || label === void 0 ? void 0 : label.length) {
         props['role'] = 'alert';
@@ -2232,12 +2232,8 @@ function Loader(_a) {
     else {
         props['aria-hidden'] = true;
     }
-    return (React__default.createElement("div", tslib.__assign({ className: classNames('Loader', className, variant === 'large'
-            ? 'Loader--large'
-            : variant === 'small'
-                ? 'Loader--small'
-                : '') }, props)));
-}
+    return (React__default.createElement("div", tslib.__assign({ ref: ref, className: classNames('Loader', className, variant === 'large' && 'Loader--large', variant === 'small' && 'Loader--small') }, props)));
+});
 Loader.propTypes = {
     className: PropTypes.string
 };
@@ -8023,6 +8019,17 @@ function useSharedRef(ref) {
 var LoaderOverlay = React.forwardRef(function (_a, ref) {
     var className = _a.className, variant = _a.variant, label = _a.label, children = _a.children, focusOnInitialRender = _a.focusOnInitialRender, _b = _a.focusTrap, focusTrap = _b === void 0 ? false : _b, other = tslib.__rest(_a, ["className", "variant", "label", "children", "focusOnInitialRender", "focusTrap"]);
     var overlayRef = useSharedRef(ref);
+    React.useEffect(function () {
+        var isolator = overlayRef.current
+            ? new AriaIsolate(overlayRef.current)
+            : null;
+        if (isolator) {
+            focusTrap ? isolator.activate() : isolator.deactivate();
+        }
+        return function () {
+            isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
+        };
+    }, [focusTrap, overlayRef.current]);
     React.useEffect(function () {
         if (!!focusOnInitialRender && overlayRef.current) {
             setTimeout(function () {
@@ -8391,7 +8398,7 @@ Stepper.propTypes = {
     className: PropTypes.string
 };
 
-var Panel = function (_a) {
+var Panel = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, collapsed = _a.collapsed, className = _a.className, heading = _a.heading, other = tslib.__rest(_a, ["children", "collapsed", "className", "heading"]);
     var headingId = !heading
@@ -8403,19 +8410,22 @@ var Panel = function (_a) {
         if (!headingId) {
             return null;
         }
-        var HeadingComponent = "h" + (typeof heading === 'object' && 'level' in heading && !!heading.level
+        var HeadingComponent = "h" + (heading &&
+            typeof heading === 'object' &&
+            'level' in heading &&
+            !!heading.level
             ? heading.level
             : 2);
-        return (React__default.createElement(HeadingComponent, { id: headingId, className: "Panel__Heading" }, typeof heading === 'object' && 'text' in heading
+        return (React__default.createElement(HeadingComponent, { id: headingId, className: "Panel__Heading" }, heading && typeof heading === 'object' && 'text' in heading
             ? heading.text
             : heading));
     };
     return (React__default.createElement("section", tslib.__assign({ "aria-labelledby": headingId, className: classNames('Panel', className, (_b = {},
             _b['Panel--collapsed'] = collapsed,
-            _b)) }, other),
+            _b)), ref: ref }, other),
         React__default.createElement(Heading, null),
         children));
-};
+});
 Panel.displayName = 'Panel';
 Panel.propTypes = {
     children: PropTypes.node.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.4.0",
+  "version": "4.5.0-canary.0c764a21",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"
@@ -124,4 +124,4 @@
       "\\.svg$": "<rootDir>/__tests__/svgMock.js"
     }
   }
-}
+}