@easypost/easy-ui 1.0.0-alpha.120 → 1.0.0-alpha.121

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @easypost/easy-ui
 
+## 1.0.0-alpha.121
+
+### Minor Changes
+
+- e47ec8f: Add `allowsThirdPartyOverlays` to `Modal.Trigger` and `ModalContainer`. When enabled, the modal stops trapping focus and stops applying `aria-hidden`/`inert` to the rest of the page, so third-party overlays that render outside the modal (e.g. Stripe Link/autofill, reCAPTCHA) remain focusable and clickable instead of locking up.
+
 ## 1.0.0-alpha.120
 
 ### Patch Changes

package/Modal/ModalContainer.d.ts

@@ -8,6 +8,14 @@ type ModalContainerProps = {
      * Whether or not the modal is dismissable.
      */
     isDismissable?: boolean;
+    /**
+     * Disables focus trapping and background aria-hiding so the modal can host
+     * third-party overlays (e.g. Stripe Link/autofill, reCAPTCHA) that render
+     * outside the modal. Use sparingly — see `ModalUnderlay` for the tradeoffs.
+     *
+     * @default false
+     */
+    allowsThirdPartyOverlays?: boolean;
     /**
      * Handler that is called when the overlay is closed.
      */

package/Modal/ModalContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContainer.d.ts","sourceRoot":"","sources":["../../src/Modal/ModalContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,SAAS,EAA0B,MAAM,OAAO,CAAC;AAM/E,KAAK,mBAAmB,GAAG;IACzB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBA0CxD"}
+{"version":3,"file":"ModalContainer.d.ts","sourceRoot":"","sources":["../../src/Modal/ModalContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,SAAS,EAA0B,MAAM,OAAO,CAAC;AAM/E,KAAK,mBAAmB,GAAG;IACzB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;OAMG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAmDxD"}

package/Modal/ModalTrigger.d.ts

@@ -11,8 +11,18 @@ export type ModalTriggerProps = {
     defaultOpen?: boolean;
     /**
      * Whether or not the modal can be dismissed.
+     *
+     * @default true
      */
     isDismissable?: boolean;
+    /**
+     * Disables focus trapping and background aria-hiding so the modal can host
+     * third-party overlays (e.g. Stripe Link/autofill, reCAPTCHA) that render
+     * outside the modal. Use sparingly — see `ModalUnderlay` for the tradeoffs.
+     *
+     * @default false
+     */
+    allowsThirdPartyOverlays?: boolean;
     /**
      * Whether the modal is open by default (controlled).
      */

package/Modal/ModalTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalTrigger.d.ts","sourceRoot":"","sources":["../../src/Modal/ModalTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAgB,MAAM,OAAO,CAAC;AAM1D,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,YAAY,CAAC;AAExE,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,QAAQ,EAAE,CAAC,YAAY,EAAE,qBAAqB,GAAG,YAAY,CAAC,CAAC;IAE/D;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA8BpD"}
+{"version":3,"file":"ModalTrigger.d.ts","sourceRoot":"","sources":["../../src/Modal/ModalTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAgB,MAAM,OAAO,CAAC;AAM1D,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,YAAY,CAAC;AAExE,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,QAAQ,EAAE,CAAC,YAAY,EAAE,qBAAqB,GAAG,YAAY,CAAC,CAAC;IAE/D;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;OAMG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA8BpD"}

package/Modal/ModalUnderlay.d.ts

@@ -13,6 +13,19 @@ type ModalUnderlayProps = {
      * Whether or not the modal is dismissable.
      */
     isDismissable?: boolean;
+    /**
+     * When `true`, the modal stops trapping focus and stops hiding the rest of
+     * the page from assistive technologies (`aria-hidden`/`inert`). Use this only
+     * for modals that intentionally host third-party overlays — e.g. Stripe
+     * Link/autofill or reCAPTCHA — which render themselves into the document
+     * *outside* the modal. react-aria's focus trap and `inert` would otherwise
+     * blur and lock up those overlays. This trades away the modal's focus
+     * containment and background hiding, so reach for it only when a third-party
+     * overlay requires it.
+     *
+     * @default false
+     */
+    allowsThirdPartyOverlays?: boolean;
 };
 export declare function ModalUnderlay(props: ModalUnderlayProps): React.JSX.Element;
 export {};

package/Modal/ModalUnderlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalUnderlay.d.ts","sourceRoot":"","sources":["../../src/Modal/ModalUnderlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAMpD,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,mBAAmB,CAAC;IAE3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAgCtD"}
+{"version":3,"file":"ModalUnderlay.d.ts","sourceRoot":"","sources":["../../src/Modal/ModalUnderlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAQ5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAMpD,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,mBAAmB,CAAC;IAE3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;;;;OAWG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AASF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAOtD"}

package/Modal/index.js

@@ -41,6 +41,7 @@ const HorizontalStack = require("../__chunks__/HorizontalStack-CWdKKY8L.js");
 const Icon = require("../__chunks__/Icon-BRlbo3RF.js");
 const Text = require("../__chunks__/Text-DkzMEqky.js");
 const VerticalStack = require("../__chunks__/VerticalStack-BHkiocKU.js");
+const ariaHideOutside = require("../__chunks__/ariaHideOutside-Dl8SH3FU.js");
 const useModalOverlay = require("../__chunks__/useModalOverlay-C4Gci3MA.js");
 const Overlay = require("../__chunks__/Overlay-BNP_t3v4.js");
 const useOverlayTrigger = require("../__chunks__/useOverlayTrigger-DP9RbCAF.js");
@@ -216,13 +217,42 @@ function ModalHeader(props) {
   });
 }
 function ModalUnderlay(props) {
-  const _a = props, { state, children } = _a, overlayProps = __objRest(_a, ["state", "children"]);
-  const { isDismissable = true } = overlayProps;
+  return props.allowsThirdPartyOverlays ? jsxRuntime.jsx(ThirdPartyOverlayUnderlay, __spreadValues({}, props)) : jsxRuntime.jsx(FocusTrappingUnderlay, __spreadValues({}, props));
+}
+function FocusTrappingUnderlay(props) {
+  const { state, children, isDismissable = true } = props;
   const ref = React.useRef(null);
-  const { modalProps, underlayProps } = useModalOverlay.$8ac8429251c45e4b$export$dbc0f175b25fb0fb(__spreadProps(__spreadValues({}, overlayProps), {
+  const { modalProps, underlayProps } = useModalOverlay.$8ac8429251c45e4b$export$dbc0f175b25fb0fb({
     isDismissable,
     isKeyboardDismissDisabled: !isDismissable
-  }), state, ref);
+  }, state, ref);
+  return jsxRuntime.jsx(ModalUnderlayContent, {
+    modalProps,
+    underlayProps,
+    modalRef: ref,
+    children
+  });
+}
+function ThirdPartyOverlayUnderlay(props) {
+  const { state, children, isDismissable = true } = props;
+  const ref = React.useRef(null);
+  const { overlayProps, underlayProps } = ariaHideOutside.$a11501f3d1d39e6c$export$ea8f71083e90600f({
+    isOpen: state.isOpen,
+    onClose: state.close,
+    isDismissable,
+    isKeyboardDismissDisabled: !isDismissable
+  }, ref);
+  ariaHideOutside.$49c51c25361d4cd2$export$ee0f7cc6afcd1c18({
+    isDisabled: !state.isOpen
+  });
+  return jsxRuntime.jsx(ModalUnderlayContent, {
+    modalProps: overlayProps,
+    underlayProps,
+    modalRef: ref,
+    children
+  });
+}
+function ModalUnderlayContent({ modalProps, underlayProps, modalRef, children }) {
   const { hasOpenNestedModal } = useModalTriggerContext();
   const className = utilities_css.classNames(styles.underlayBg, hasOpenNestedModal && styles.underlayBgHidden);
   return jsxRuntime.jsx(Overlay.$337b884510726a0d$export$c6fdb837b070b4ff, {
@@ -230,7 +260,7 @@ function ModalUnderlay(props) {
       className
     }, underlayProps), {
       children: jsxRuntime.jsxs("div", __spreadProps(__spreadValues({}, modalProps), {
-        ref,
+        ref: modalRef,
         className: styles.underlayBox,
         children: [jsxRuntime.jsx("div", {
           className: styles.underlayEdge
@@ -261,7 +291,7 @@ function ModalTrigger(props) {
   });
 }
 function ModalContainer(props) {
-  const { children, isDismissable = true, onDismiss = () => {
+  const { children, isDismissable = true, allowsThirdPartyOverlays = false, onDismiss = () => {
   } } = props;
   const childArray = React.Children.toArray(children);
   if (childArray.length > 1) {
@@ -294,6 +324,7 @@ function ModalContainer(props) {
     children: state.isOpen && jsxRuntime.jsx(ModalUnderlay, {
       state,
       isDismissable,
+      allowsThirdPartyOverlays,
       children: lastChild ? React.cloneElement(lastChild, overlayProps) : null
     })
   });

package/Modal/index.mjs

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { jsx, jsxs } from "react/jsx-runtime";
-import React__default, { createContext, useState, useMemo, useContext, cloneElement, useRef } from "react";
+import React__default, { createContext, useState, useMemo, useContext, useRef, cloneElement } from "react";
 import { classNames, variationName } from "../utilities/css.mjs";
 import { useScrollbar } from "../utilities/useScrollbar.mjs";
 import { B as Button } from "../__chunks__/Button-JL1YQxJ5.mjs";
@@ -39,6 +39,7 @@ import { H as HorizontalStack } from "../__chunks__/HorizontalStack-CJavrBHm.mjs
 import { I as Icon } from "../__chunks__/Icon-BIpaQJ_I.mjs";
 import { T as Text } from "../__chunks__/Text-D6oT5WJQ.mjs";
 import { V as VerticalStack } from "../__chunks__/VerticalStack-DoMqBfYD.mjs";
+import { $ as $a11501f3d1d39e6c$export$ea8f71083e90600f, a as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18 } from "../__chunks__/ariaHideOutside-BYq9cUwo.mjs";
 import { $ as $8ac8429251c45e4b$export$dbc0f175b25fb0fb } from "../__chunks__/useModalOverlay-BmYXH7rq.mjs";
 import { d as $337b884510726a0d$export$c6fdb837b070b4ff, a as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../__chunks__/Overlay-Dkjxuk6V.mjs";
 import { $ as $628037886ba31236$export$f9d5c8beee7d008d } from "../__chunks__/useOverlayTrigger-CIVwezu3.mjs";
@@ -214,13 +215,42 @@ function ModalHeader(props) {
   });
 }
 function ModalUnderlay(props) {
-  const _a = props, { state, children } = _a, overlayProps = __objRest(_a, ["state", "children"]);
-  const { isDismissable = true } = overlayProps;
-  const ref = React__default.useRef(null);
-  const { modalProps, underlayProps } = $8ac8429251c45e4b$export$dbc0f175b25fb0fb(__spreadProps(__spreadValues({}, overlayProps), {
+  return props.allowsThirdPartyOverlays ? jsx(ThirdPartyOverlayUnderlay, __spreadValues({}, props)) : jsx(FocusTrappingUnderlay, __spreadValues({}, props));
+}
+function FocusTrappingUnderlay(props) {
+  const { state, children, isDismissable = true } = props;
+  const ref = useRef(null);
+  const { modalProps, underlayProps } = $8ac8429251c45e4b$export$dbc0f175b25fb0fb({
+    isDismissable,
+    isKeyboardDismissDisabled: !isDismissable
+  }, state, ref);
+  return jsx(ModalUnderlayContent, {
+    modalProps,
+    underlayProps,
+    modalRef: ref,
+    children
+  });
+}
+function ThirdPartyOverlayUnderlay(props) {
+  const { state, children, isDismissable = true } = props;
+  const ref = useRef(null);
+  const { overlayProps, underlayProps } = $a11501f3d1d39e6c$export$ea8f71083e90600f({
+    isOpen: state.isOpen,
+    onClose: state.close,
     isDismissable,
     isKeyboardDismissDisabled: !isDismissable
-  }), state, ref);
+  }, ref);
+  $49c51c25361d4cd2$export$ee0f7cc6afcd1c18({
+    isDisabled: !state.isOpen
+  });
+  return jsx(ModalUnderlayContent, {
+    modalProps: overlayProps,
+    underlayProps,
+    modalRef: ref,
+    children
+  });
+}
+function ModalUnderlayContent({ modalProps, underlayProps, modalRef, children }) {
   const { hasOpenNestedModal } = useModalTriggerContext();
   const className = classNames(styles.underlayBg, hasOpenNestedModal && styles.underlayBgHidden);
   return jsx($337b884510726a0d$export$c6fdb837b070b4ff, {
@@ -228,7 +258,7 @@ function ModalUnderlay(props) {
       className
     }, underlayProps), {
       children: jsxs("div", __spreadProps(__spreadValues({}, modalProps), {
-        ref,
+        ref: modalRef,
         className: styles.underlayBox,
         children: [jsx("div", {
           className: styles.underlayEdge
@@ -259,7 +289,7 @@ function ModalTrigger(props) {
   });
 }
 function ModalContainer(props) {
-  const { children, isDismissable = true, onDismiss = () => {
+  const { children, isDismissable = true, allowsThirdPartyOverlays = false, onDismiss = () => {
   } } = props;
   const childArray = React__default.Children.toArray(children);
   if (childArray.length > 1) {
@@ -292,6 +322,7 @@ function ModalContainer(props) {
     children: state.isOpen && jsx(ModalUnderlay, {
       state,
       isDismissable,
+      allowsThirdPartyOverlays,
       children: lastChild ? cloneElement(lastChild, overlayProps) : null
     })
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easypost/easy-ui",
-  "version": "1.0.0-alpha.120",
+  "version": "1.0.0-alpha.121",
   "sideEffects": [
     "**/*.css"
   ],