@deque/cauldron-react 6.7.0-canary.2d78ed57 → 6.7.0-canary.4be82cb3

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

@@ -0,0 +1,15 @@
+import React from 'react';
+interface DrawerProps<T extends HTMLElement = HTMLElement> extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    position: 'top' | 'bottom' | 'left' | 'right';
+    open?: boolean;
+    behavior?: 'modal' | 'non-modal';
+    focusOptions?: {
+        initialFocus?: T | React.RefObject<T> | React.MutableRefObject<T>;
+        returnFocus?: T | React.RefObject<T> | React.MutableRefObject<T>;
+    };
+    onClose?: () => void;
+    portal?: React.RefObject<HTMLElement> | HTMLElement;
+}
+declare const Drawer: React.ForwardRefExoticComponent<DrawerProps<HTMLElement> & React.RefAttributes<HTMLDivElement>>;
+export default Drawer;

package/lib/index.d.ts

@@ -59,6 +59,7 @@ export { default as Popover } from './components/Popover';
 export { default as Timeline, TimelineItem } from './components/Timeline';
 export { default as TextEllipsis } from './components/TextEllipsis';
 export { default as CopyButton } from './components/CopyButton';
+export { default as Drawer } from './components/Drawer';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -791,6 +791,23 @@ var OptionsMenuWrapper = function (_a) {
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('OptionsMenu', menuAlignment(align), className) }, other)));
 };
 
+/**
+ * When an element can be passed as a value that is either an element or an
+ * elementRef, this will resolve the property down to the resulting element
+ */
+function resolveElement(elementOrRef) {
+    if (elementOrRef instanceof Element) {
+        return elementOrRef;
+    }
+    if (elementOrRef &&
+        typeof elementOrRef === 'object' &&
+        'current' in elementOrRef &&
+        elementOrRef.current instanceof Element) {
+        return elementOrRef.current;
+    }
+    return null;
+}
+
 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();
@@ -799,11 +816,9 @@ function ClickOutsideListener(_a, ref) {
             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);
-            }
+        var elementTarget = resolveElement(target);
+        if (target && !(elementTarget === null || elementTarget === void 0 ? void 0 : elementTarget.contains(eventTarget))) {
+            onClickOutside(event);
             // If a target is passed in via a prop, we defer to utilizing that
             // target instead of a child element target
             return;
@@ -1648,6 +1663,46 @@ function hasIdRef(ids, id) {
     return idRefs(ids).has(id);
 }
 
+var isEscapeKey = function (event) {
+    return event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27;
+};
+/**
+ * When a component needs to implement an escape handler, such as in modal
+ * dialogs, useEscapeKey will handle the events and call the provided callback
+ * handler when an escape key event has been fired.
+ *
+ * @example
+ * useEscapeKey(() => close())
+ */
+function useEscapeKey(options, dependencies) {
+    if (dependencies === void 0) { dependencies = []; }
+    var callback = options.callback;
+    var event = options.event || 'keyup';
+    var target = resolveElement(options.target) || document.body;
+    var active = typeof options.active === 'boolean' ? options.active : true;
+    React.useEffect(function () {
+        var eventListener = function (event) {
+            if (isEscapeKey(event) &&
+                (options.defaultPrevented ? !event.defaultPrevented : true)) {
+                callback(event);
+            }
+        };
+        if (active) {
+            target === null || target === void 0 ? void 0 : target.addEventListener(event, eventListener, options.capture);
+        }
+        return function () {
+            target === null || target === void 0 ? void 0 : target.removeEventListener(event, eventListener, options.capture);
+        };
+    }, tslib.__spreadArray([
+        active,
+        callback,
+        event,
+        target,
+        options.capture,
+        options.defaultPrevented
+    ], tslib.__read(dependencies), false));
+}
+
 var TIP_HIDE_DELAY = 100;
 // fires a custom "cauldron:tooltip:show" / "cauldron:tooltip:hide" event
 // to allow projects using cauldron to hook into when a tooltip is shown/hidden
@@ -1736,30 +1791,14 @@ function Tooltip(_a) {
         attributes.popper['data-popper-placement']) ||
         initialPlacement;
     // Only listen to key ups when the tooltip is visible
-    React.useEffect(function () {
-        var handleEscape = function (event) {
-            if (event.key === 'Escape' ||
-                event.key === 'Esc' ||
-                event.keyCode === 27) {
-                event.preventDefault();
-                setShowTooltip(false);
-            }
-        };
-        var targetElement = document.body;
-        if (showTooltip && typeof showProp !== 'boolean') {
-            targetElement.addEventListener('keyup', handleEscape, { capture: true });
-        }
-        else {
-            targetElement.removeEventListener('keyup', handleEscape, {
-                capture: true
-            });
-        }
-        return function () {
-            targetElement.removeEventListener('keyup', handleEscape, {
-                capture: true
-            });
-        };
-    }, [showTooltip, showProp]);
+    useEscapeKey({
+        callback: function (event) {
+            event.preventDefault();
+            setShowTooltip(false);
+        },
+        capture: true,
+        active: showTooltip && typeof showProp !== 'boolean'
+    }, [setShowTooltip]);
     // Handle hover and focus events for the targetElement
     React.useEffect(function () {
         if (typeof showProp !== 'boolean') {
@@ -3275,25 +3314,10 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
             mediaQueryList.removeEventListener('change', listener);
         };
     }, []);
-    React.useEffect(function () {
-        var handleEscape = function (event) {
-            if (event.key === 'Escape' ||
-                event.key === 'Esc' ||
-                event.keyCode === 27) {
-                setCollapsed(true);
-            }
-        };
-        var targetElement = document.body;
-        if (isFocusTrap) {
-            targetElement.addEventListener('keyup', handleEscape);
-        }
-        else {
-            targetElement.removeEventListener('keyup', handleEscape);
-        }
-        return function () {
-            targetElement.removeEventListener('keyup', handleEscape);
-        };
-    }, [isFocusTrap]);
+    useEscapeKey({
+        callback: function () { return setCollapsed(true); },
+        active: isFocusTrap
+    }, [setCollapsed]);
     var handleClickOutside = function () {
         if (!isCollapsed && isFocusTrap) {
             setCollapsed(true);
@@ -4076,24 +4100,6 @@ var Popover = React.forwardRef(function (_a, ref) {
         }
         targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute('aria-expanded', Boolean(show).toString());
     }, [show, popoverRef.current]);
-    React.useEffect(function () {
-        var handleEscape = function (event) {
-            if (event.key === 'Escape' ||
-                event.key === 'Esc' ||
-                event.keyCode === 27) {
-                handleClosePopover();
-            }
-        };
-        if (show) {
-            document.body.addEventListener('keyup', handleEscape);
-        }
-        else {
-            document.body.removeEventListener('keyup', handleEscape);
-        }
-        return function () {
-            document.body.removeEventListener('keyup', handleEscape);
-        };
-    }, [show]);
     React.useEffect(function () {
         var attrText = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute('aria-controls');
         var hasPopupAttr = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute('aria-haspopup');
@@ -4120,6 +4126,10 @@ var Popover = React.forwardRef(function (_a, ref) {
             onClose();
         }
     };
+    useEscapeKey({
+        callback: handleClosePopover,
+        active: show
+    }, [show]);
     if (!show || !isBrowser())
         return null;
     return reactDom.createPortal(React__default["default"].createElement(FocusTrap__default["default"], { focusTrapOptions: {
@@ -4197,6 +4207,111 @@ var TextEllipsis = React__default["default"].forwardRef(function (_a, ref) {
 });
 TextEllipsis.displayName = 'TextEllipsis';
 
+var Drawer = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, position = _a.position, _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.behavior, behavior = _c === void 0 ? 'modal' : _c, _d = _a.focusOptions, focusOptions = _d === void 0 ? {} : _d, portal = _a.portal, onClose = _a.onClose, style = _a.style, props = tslib.__rest(_a, ["children", "className", "position", "open", "behavior", "focusOptions", "portal", "onClose", "style"]);
+    var drawerRef = useSharedRef(ref);
+    var openRef = React.useRef(!!open);
+    var previousActiveElementRef = React.useRef(null);
+    var focusInitial = focusOptions.initialFocus, focusReturn = focusOptions.returnFocus;
+    var _e = tslib.__read(React.useState(!!open), 2), isTransitioning = _e[0], setIsTransitioning = _e[1];
+    var isModal = behavior === 'modal';
+    var handleClose = React.useCallback(function () {
+        // istanbul ignore next
+        if (open && typeof onClose === 'function') {
+            onClose();
+        }
+    }, [open, onClose]);
+    React.useEffect(function () {
+        // jsdom does not trigger transitionend event
+        // istanbul ignore next
+        var transitionEndHandler = function () { return setIsTransitioning(false); };
+        document.addEventListener('transitionend', transitionEndHandler);
+        return function () {
+            document.removeEventListener('transitionend', transitionEndHandler);
+        };
+    }, [setIsTransitioning]);
+    React.useEffect(function () {
+        if (openRef.current !== open) {
+            setIsTransitioning(true);
+        }
+        openRef.current = open;
+    }, [open, setIsTransitioning]);
+    React.useEffect(function () {
+        if (!isModal) {
+            return;
+        }
+        var isolator = new AriaIsolate(drawerRef.current);
+        if (open) {
+            isolator.activate();
+        }
+        else {
+            isolator.deactivate();
+        }
+        return function () {
+            isolator.deactivate();
+        };
+    }, [isModal, open]);
+    React.useLayoutEffect(function () {
+        var _a, _b, _c;
+        if (open) {
+            previousActiveElementRef.current =
+                document.activeElement;
+            var initialFocusElement = resolveElement(focusInitial);
+            if (initialFocusElement) {
+                initialFocusElement.focus();
+            }
+            else {
+                var focusable = (_a = drawerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector);
+                if (focusable) {
+                    focusable.focus();
+                }
+                else {
+                    // fallback focus
+                    (_b = drawerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+            }
+        }
+        else if (previousActiveElementRef.current) {
+            var returnFocusElement = resolveElement(focusReturn);
+            if (returnFocusElement) {
+                returnFocusElement.focus();
+            }
+            else {
+                // fallback focus
+                (_c = previousActiveElementRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+            }
+        }
+    }, [open, focusInitial, focusReturn]);
+    useEscapeKey({ callback: handleClose, active: open, defaultPrevented: true }, [onClose]);
+    // istanbul ignore next
+    if (!isBrowser()) {
+        return null;
+    }
+    var portalElement = resolveElement(portal);
+    return reactDom.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClose, mouseEvent: open ? undefined : false, touchEvent: open ? undefined : false, target: drawerRef },
+            React__default["default"].createElement(FocusTrap__default["default"], { active: !!isModal && !!open, focusTrapOptions: {
+                    allowOutsideClick: true,
+                    escapeDeactivates: false,
+                    clickOutsideDeactivates: false,
+                    initialFocus: false,
+                    setReturnFocus: false,
+                    fallbackFocus: function () { return drawerRef.current; }
+                } },
+                React__default["default"].createElement("div", tslib.__assign({ ref: drawerRef, className: classNames__default["default"](className, 'Drawer', {
+                        'Drawer--open': !!open,
+                        'Drawer--top': position === 'top',
+                        'Drawer--bottom': position === 'bottom',
+                        'Drawer--left': position === 'left',
+                        'Drawer--right': position === 'right'
+                    }), "aria-hidden": !open || undefined, style: tslib.__assign({ visibility: !open && !isTransitioning ? 'hidden' : undefined }, style), tabIndex: open ? -1 : undefined }, props), children))),
+        React__default["default"].createElement(Scrim, { show: !!open && !!isModal })), portalElement ||
+        (
+        // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+        document === null || document === void 0 ? void 0 : document.body));
+});
+Drawer.displayName = 'Drawer';
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({
@@ -4299,6 +4414,7 @@ exports.DescriptionTerm = DescriptionTerm;
 exports.Dialog = Dialog;
 exports.DialogContent = DialogContent;
 exports.DialogFooter = DialogFooter;
+exports.Drawer = Drawer;
 exports.ExpandCollapsePanel = ExpandCollapsePanel;
 exports.FieldWrap = FieldWrap;
 exports.Icon = Icon;

package/lib/utils/resolveElement.d.ts

@@ -0,0 +1,6 @@
+import type { RefObject, MutableRefObject } from 'react';
+/**
+ * When an element can be passed as a value that is either an element or an
+ * elementRef, this will resolve the property down to the resulting element
+ */
+export default function resolveElement<T extends Element = Element>(elementOrRef: T | RefObject<T> | MutableRefObject<T> | undefined): T | null;

package/lib/utils/useEscapeKey.d.ts

@@ -0,0 +1,17 @@
+import { type DependencyList } from 'react';
+/**
+ * When a component needs to implement an escape handler, such as in modal
+ * dialogs, useEscapeKey will handle the events and call the provided callback
+ * handler when an escape key event has been fired.
+ *
+ * @example
+ * useEscapeKey(() => close())
+ */
+export default function useEscapeKey<T extends HTMLElement = HTMLElement>(options: {
+    active?: boolean;
+    callback: (event: KeyboardEvent) => void;
+    event?: 'keydown' | 'keypress' | 'keyup';
+    target?: T | React.RefObject<T> | React.MutableRefObject<T>;
+    defaultPrevented?: boolean;
+    capture?: boolean;
+}, dependencies?: DependencyList): void;

package/package.json

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