@deque/cauldron-react 5.8.0-canary.55b0441c → 5.8.0-canary.b09c14c1

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

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+import { Placement } from '@popperjs/core';
+import { Cauldron } from '../../types';
+export type PopoverVariant = 'prompt' | 'custom';
+type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
+    target: React.RefObject<HTMLElement> | HTMLElement;
+    variant?: PopoverVariant;
+    show: boolean;
+    onClose: () => void;
+    placement?: Placement;
+    portal?: React.RefObject<HTMLElement> | HTMLElement;
+};
+type CustomProps = BaseProps & {
+    variant: 'custom';
+    applyButtonText?: string;
+    onApply?: () => void;
+    closeButtonText?: string;
+    infoText?: ReactNode;
+    children: ReactNode;
+} & Cauldron.LabelProps;
+type PromptProps = BaseProps & {
+    variant: 'prompt';
+    applyButtonText?: string;
+    onApply: () => void;
+    closeButtonText?: string;
+    infoText: ReactNode;
+    children?: ReactNode;
+};
+export type PopoverProps = PromptProps | CustomProps;
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
+export default Popover;

package/lib/index.d.ts

@@ -53,6 +53,7 @@ export { default as Breadcrumb, BreadcrumbItem, BreadcrumbLink } from './compone
 export { default as TwoColumnPanel, ColumnHeader, ColumnGroupHeader, ColumnLeft, ColumnRight, ColumnList } from './components/TwoColumnPanel';
 export { default as Notice } from './components/Notice';
 export { default as Listbox, ListboxOption, ListboxGroup } from './components/Listbox';
+export { default as Popover } from './components/Popover';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -4162,6 +4162,131 @@ var ListboxGroup = React.forwardRef(function (_a, ref) {
 });
 ListboxGroup.displayName = 'ListboxGroup';
 
+var PromptPopoverContent = function (_a) {
+    var onClose = _a.onClose, _b = _a.applyButtonText, applyButtonText = _b === void 0 ? 'Apply' : _b, onApply = _a.onApply, _c = _a.closeButtonText, closeButtonText = _c === void 0 ? 'Close' : _c, infoText = _a.infoText, infoTextId = _a.infoTextId;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("span", { id: infoTextId }, infoText),
+        React__default["default"].createElement(Button, { className: "Popover__apply", onClick: onApply, thin: true }, applyButtonText),
+        React__default["default"].createElement(Button, { className: "Popover__close", variant: "secondary", onClick: onClose, thin: true }, closeButtonText)));
+};
+var Popover = React.forwardRef(function (_a, ref) {
+    var propId = _a.id, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, children = _a.children, portal = _a.portal, target = _a.target, _c = _a.variant, variant = _c === void 0 ? 'custom' : _c, _d = _a.show, show = _d === void 0 ? false : _d, onClose = _a.onClose, className = _a.className, applyButtonText = _a.applyButtonText, closeButtonText = _a.closeButtonText, infoText = _a.infoText, onApply = _a.onApply, props = tslib.__rest(_a, ["id", "placement", "children", "portal", "target", "variant", "show", "onClose", "className", "applyButtonText", "closeButtonText", "infoText", "onApply"]);
+    var _e = tslib.__read(propId ? [propId] : nextId.useId(1, 'popover'), 1), id = _e[0];
+    var _f = tslib.__read(React.useState(null), 2), targetElement = _f[0], setTargetElement = _f[1];
+    var _g = tslib.__read(React.useState(null), 2), isolator = _g[0], setIsolator = _g[1];
+    var popoverRef = useSharedRef(ref);
+    var _h = tslib.__read(React.useState(null), 2), arrowElement = _h[0], setArrowElement = _h[1];
+    var _j = reactPopper.usePopper(targetElement, popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current, {
+        placement: initialPlacement,
+        modifiers: [
+            { name: 'preventOverflow', options: { padding: 8 } },
+            { name: 'flip' },
+            { name: 'offset', options: { offset: [0, 8] } },
+            { name: 'arrow', options: { padding: 5, element: arrowElement } }
+        ]
+    }), styles = _j.styles, attributes = _j.attributes;
+    var placement = (attributes.popper &&
+        attributes.popper['data-popper-placement']) ||
+        initialPlacement;
+    var additionalProps = variant === 'prompt' ? { 'aria-labelledby': "".concat(id, "-label") } : {};
+    // Keep targetElement in sync with target prop
+    React.useEffect(function () {
+        var targetElement = target && 'current' in target ? target.current : target;
+        setTargetElement(targetElement);
+    }, [target]);
+    React.useEffect(function () {
+        return function () {
+            isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
+        };
+    }, []);
+    React.useEffect(function () {
+        if (!isolator)
+            return;
+        if (show) {
+            isolator.activate();
+        }
+        else {
+            isolator.deactivate();
+        }
+        return function () {
+            isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
+        };
+    }, [show, isolator]);
+    React.useEffect(function () {
+        if (popoverRef.current)
+            attachIsolator();
+    }, [popoverRef.current]);
+    React.useEffect(function () {
+        if (show && popoverRef.current) {
+            // Find the first focusable element inside the container
+            var firstFocusableElement = popoverRef.current.querySelector(focusableSelector);
+            if (firstFocusableElement instanceof HTMLElement) {
+                firstFocusableElement.focus();
+            }
+        }
+        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');
+        if (!(attrText === null || attrText === void 0 ? void 0 : attrText.includes(id)) && show) {
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute('aria-controls', id);
+        }
+        if (!hasPopupAttr) {
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute('aria-haspopup', 'true');
+        }
+    }, [targetElement, id, show]);
+    var handleClickOutside = function () {
+        if (show) {
+            handleClosePopover();
+        }
+    };
+    var attachIsolator = function () {
+        if (popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current) {
+            setIsolator(new AriaIsolate(popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current));
+        }
+    };
+    var handleClosePopover = function () {
+        isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
+        if (show) {
+            onClose();
+        }
+    };
+    if (!show || !isBrowser())
+        return null;
+    return reactDom.createPortal(React__default["default"].createElement(FocusTrap__default["default"], { focusTrapOptions: {
+            allowOutsideClick: true,
+            fallbackFocus: '.Popover__borderLeft'
+        } },
+        React__default["default"].createElement(ClickOutsideListener, { 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'
+                }), ref: popoverRef, role: "dialog", style: styles.popper }, attributes.popper, props, additionalProps),
+                React__default["default"].createElement("div", { className: "Popover__popoverArrow", ref: setArrowElement, style: styles.arrow }),
+                React__default["default"].createElement("div", { className: "Popover__borderLeft" }),
+                variant === 'prompt' ? (React__default["default"].createElement(PromptPopoverContent, { applyButtonText: applyButtonText, onApply: onApply, closeButtonText: closeButtonText, infoText: infoText || '', onClose: handleClosePopover, infoTextId: "".concat(id, "-label") })) : (children)))), (portal && 'current' in portal ? portal.current : portal) || document.body);
+});
+Popover.displayName = 'Popover';
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({
@@ -4293,6 +4418,7 @@ exports.PanelContent = PanelContent;
 exports.PanelHeader = PanelHeader;
 exports.PanelTrigger = PanelTrigger$1;
 exports.Pointout = Pointout;
+exports.Popover = Popover;
 exports.ProgressBar = ProgressBar;
 exports.RadioCardGroup = RadioCardGroup;
 exports.RadioGroup = RadioGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "5.8.0-canary.55b0441c",
+  "version": "5.8.0-canary.b09c14c1",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
   "publishConfig": {