@easypost/easy-ui 1.0.0-alpha.72 → 1.0.0-alpha.73

package/__chunks__/{Dialog-CuqmbMC4.js → Dialog-Bn6AgWyj.js}

@@ -30,17 +30,19 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const Button = require("./Button-BoPQ-Fx9.js");
-const utils = require("./utils-BlKqJM2_.js");
+const Button = require("./Button-E5WMp4Zg.js");
+const utils = require("./utils-CY9C69XV.js");
 const React = require("react");
-const mergeProps = require("./mergeProps-DniMwM6P.js");
+const mergeProps = require("./mergeProps-6pKCnMWU.js");
 const filterDOMProps = require("./filterDOMProps-D3iOHP0H.js");
-const Overlay = require("./Overlay-CwJbrICR.js");
-const useMenuTriggerState = require("./useMenuTriggerState-DTZmPbSP.js");
-const useOverlayTrigger = require("./useOverlayTrigger-CiUR_pLO.js");
-const useDialog = require("./useDialog-DJ-g6m8Y.js");
+const Overlay = require("./Overlay-CwRnK9dm.js");
+const useMenuTriggerState = require("./useMenuTriggerState-Skj7UUPq.js");
+const useOverlayTrigger = require("./useOverlayTrigger-Df2Gw0ns.js");
+const useDialog = require("./useDialog-BkTg_V3k.js");
 const ReactDOM = require("react-dom");
-const utilities = require("./utilities-DIZYscJV.js");
+const focusSafely = require("./focusSafely-DLX4i5KV.js");
+const context = require("./context-BQfsEeih.js");
+const utilities = require("./utilities-1DzM5WE1.js");
 function $d3f049242431219c$export$6d3443f2c48bfc20(ref, isReady = true) {
   let [isEntering, setEntering] = React.useState(true);
   let isAnimationReady = isEntering && isReady;
@@ -111,6 +113,7 @@ const $44f671af83e7d9e0$export$2de4954e8ae13b9f = /* @__PURE__ */ React.createCo
   placement: "bottom"
 });
 const $07b14b47974efb58$export$9b9a0cd73afb7ca4 = /* @__PURE__ */ React.createContext(null);
+const $07b14b47974efb58$var$PopoverGroupContext = /* @__PURE__ */ React.createContext(null);
 const $07b14b47974efb58$export$5b6b19405a83ff9d = /* @__PURE__ */ React.forwardRef(function Popover(props, ref) {
   [props, ref] = utils.$64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $07b14b47974efb58$export$9b9a0cd73afb7ca4);
   let contextState = React.useContext($de32f1b87079253c$export$d2f961adcb0afbe);
@@ -118,6 +121,7 @@ const $07b14b47974efb58$export$5b6b19405a83ff9d = /* @__PURE__ */ React.forwardR
   let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
   let isExiting = $d3f049242431219c$export$45fda7c47f93fd48(ref, state.isOpen) || props.isExiting || false;
   let isHidden = Button.$f39a9eba43920ace$export$b5d7cc18bb8d2b59();
+  let { direction } = context.$18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
   if (isHidden) {
     let children = props.children;
     if (typeof children === "function") children = children({
@@ -134,13 +138,17 @@ const $07b14b47974efb58$export$5b6b19405a83ff9d = /* @__PURE__ */ React.forwardR
     triggerRef: props.triggerRef,
     state,
     popoverRef: ref,
-    isExiting
+    isExiting,
+    dir: direction
   }));
 });
 function $07b14b47974efb58$var$PopoverInner(_a) {
   var _b = _a, { state, isExiting, UNSTABLE_portalContainer } = _b, props = __objRest(_b, ["state", "isExiting", "UNSTABLE_portalContainer"]);
   let arrowRef = React.useRef(null);
   let [arrowWidth, setArrowWidth] = React.useState(0);
+  let containerRef = React.useRef(null);
+  let groupCtx = React.useContext($07b14b47974efb58$var$PopoverGroupContext);
+  let isSubPopover = groupCtx && props.trigger === "SubmenuTrigger";
   mergeProps.$f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
     if (arrowRef.current && state.isOpen) setArrowWidth(arrowRef.current.getBoundingClientRect().width);
   }, [
@@ -150,7 +158,10 @@ function $07b14b47974efb58$var$PopoverInner(_a) {
   var _props_offset;
   let { popoverProps, underlayProps, arrowProps, placement } = utilities.$f2f8a6077418541e$export$542a6fd13ac93354(__spreadProps(__spreadValues({}, props), {
     offset: (_props_offset = props.offset) !== null && _props_offset !== void 0 ? _props_offset : 8,
-    arrowSize: arrowWidth
+    arrowSize: arrowWidth,
+    // If this is a submenu/subdialog, use the root popover's container 
+    // to detect outside interaction and add aria-hidden.
+    groupRef: isSubPopover ? groupCtx : containerRef
   }), state);
   let ref = props.popoverRef;
   let isEntering = $d3f049242431219c$export$6d3443f2c48bfc20(ref, !!placement) || props.isEntering || false;
@@ -163,21 +174,30 @@ function $07b14b47974efb58$var$PopoverInner(_a) {
       isExiting
     }
   }));
+  let shouldBeDialog = !props.isNonModal || props.trigger === "SubmenuTrigger";
+  let [isDialog, setDialog] = React.useState(false);
+  mergeProps.$f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    if (ref.current) setDialog(shouldBeDialog && !ref.current.querySelector("[role=dialog]"));
+  }, [
+    ref,
+    shouldBeDialog
+  ]);
+  React.useEffect(() => {
+    if (isDialog && ref.current && !ref.current.contains(document.activeElement)) focusSafely.$3ad3f6e1647bc98d$export$80f3e147d781571c(ref.current);
+  }, [
+    isDialog,
+    ref
+  ]);
   let style = __spreadValues(__spreadValues({}, popoverProps.style), renderProps.style);
-  return /* @__PURE__ */ React.createElement(Overlay.$337b884510726a0d$export$c6fdb837b070b4ff, __spreadProps(__spreadValues({}, props), {
-    isExiting,
-    portalContainer: UNSTABLE_portalContainer
-  }), !props.isNonModal && state.isOpen && /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
-    "data-testid": "underlay"
-  }, underlayProps), {
-    style: {
-      position: "fixed",
-      inset: 0
-    }
-  })), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadValues({}, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(filterDOMProps.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props), popoverProps)), renderProps), {
+  let overlay = /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadValues({}, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(filterDOMProps.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props), popoverProps)), renderProps), {
+    role: isDialog ? "dialog" : void 0,
+    tabIndex: isDialog ? -1 : void 0,
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"],
     ref,
     slot: props.slot || void 0,
     style,
+    dir: props.dir,
     "data-trigger": props.trigger,
     "data-placement": placement,
     "data-entering": isEntering || void 0,
@@ -191,7 +211,32 @@ function $07b14b47974efb58$var$PopoverInner(_a) {
     })
   }, renderProps.children), /* @__PURE__ */ React.createElement(utilities.$86ea4cb521eb2e37$export$2317d149ed6f78c4, {
     onDismiss: state.close
-  })));
+  }));
+  if (!isSubPopover) return /* @__PURE__ */ React.createElement(Overlay.$337b884510726a0d$export$c6fdb837b070b4ff, __spreadProps(__spreadValues({}, props), {
+    shouldContainFocus: isDialog,
+    isExiting,
+    portalContainer: UNSTABLE_portalContainer
+  }), !props.isNonModal && state.isOpen && /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
+    "data-testid": "underlay"
+  }, underlayProps), {
+    style: {
+      position: "fixed",
+      inset: 0
+    }
+  })), /* @__PURE__ */ React.createElement("div", {
+    ref: containerRef,
+    style: {
+      display: "contents"
+    }
+  }, /* @__PURE__ */ React.createElement($07b14b47974efb58$var$PopoverGroupContext.Provider, {
+    value: containerRef
+  }, overlay)));
+  var _ref;
+  return /* @__PURE__ */ React.createElement(Overlay.$337b884510726a0d$export$c6fdb837b070b4ff, __spreadProps(__spreadValues({}, props), {
+    shouldContainFocus: isDialog,
+    isExiting,
+    portalContainer: (_ref = UNSTABLE_portalContainer !== null && UNSTABLE_portalContainer !== void 0 ? UNSTABLE_portalContainer : groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.current) !== null && _ref !== void 0 ? _ref : void 0
+  }), overlay);
 }
 const $3674c52c6b3c5bce$export$795aec4671cbae19 = /* @__PURE__ */ React.createContext(null);
 const $de32f1b87079253c$export$8b93a07348a7730c = /* @__PURE__ */ React.createContext(null);
@@ -222,7 +267,8 @@ function $de32f1b87079253c$export$2e1e1122cf0cba88(props) {
         $07b14b47974efb58$export$9b9a0cd73afb7ca4,
         {
           trigger: "DialogTrigger",
-          triggerRef: buttonRef
+          triggerRef: buttonRef,
+          "aria-labelledby": overlayProps["aria-labelledby"]
         }
       ]
     ]

package/__chunks__/{Dialog-D9aIj4DH.mjs → Dialog-CpCJycIv.mjs}

@@ -29,17 +29,19 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { $ as $f39a9eba43920ace$export$b5d7cc18bb8d2b59, a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "./Button-DHEZ4A2s.mjs";
-import { $ as $64fa3d84918910a7$export$29f1550f4b0d4415, a as $64fa3d84918910a7$export$4d86445c2cf5e3, b as $64fa3d84918910a7$export$2881499e37b75b9a, c as $64fa3d84918910a7$export$c62b8e45d58ddad9 } from "./utils-BIfsWYLR.mjs";
-import React__default, { useState, useCallback, createContext, forwardRef, useContext, useRef } from "react";
-import { d as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, $ as $3ef42575df84b30b$export$9d1611c77c2fe928, c as $bdb11010cef70236$export$f680877a34711e37 } from "./mergeProps-DSi85raC.mjs";
+import { $ as $f39a9eba43920ace$export$b5d7cc18bb8d2b59, a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "./Button-DhaXhFT-.mjs";
+import { $ as $64fa3d84918910a7$export$29f1550f4b0d4415, a as $64fa3d84918910a7$export$4d86445c2cf5e3, b as $64fa3d84918910a7$export$2881499e37b75b9a, c as $64fa3d84918910a7$export$c62b8e45d58ddad9 } from "./utils-VVmFE3B0.mjs";
+import React__default, { useState, useCallback, createContext, forwardRef, useContext, useRef, useEffect } from "react";
+import { e as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, $ as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $bdb11010cef70236$export$f680877a34711e37 } from "./mergeProps-C4OYS8Nd.mjs";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-EDDcM64A.mjs";
-import { a as $fc909762b330b746$export$61c6a8c84e605fb6, d as $337b884510726a0d$export$c6fdb837b070b4ff, e as $f1ab8c75478c6f73$export$3351871ee4b288b8 } from "./Overlay-zuiAML3I.mjs";
-import { $ as $a28c903ee9ad8dc5$export$79fefeb1c2091ac3 } from "./useMenuTriggerState-BJJ3WdLH.mjs";
-import { $ as $628037886ba31236$export$f9d5c8beee7d008d } from "./useOverlayTrigger-BvP35sYf.mjs";
-import { $ as $40df3f8667284809$export$d55e7ee900f34e93 } from "./useDialog-Bxep5NaV.mjs";
+import { a as $fc909762b330b746$export$61c6a8c84e605fb6, d as $337b884510726a0d$export$c6fdb837b070b4ff, e as $f1ab8c75478c6f73$export$3351871ee4b288b8 } from "./Overlay-BtkNBEyr.mjs";
+import { $ as $a28c903ee9ad8dc5$export$79fefeb1c2091ac3 } from "./useMenuTriggerState-BtbgVHYJ.mjs";
+import { $ as $628037886ba31236$export$f9d5c8beee7d008d } from "./useOverlayTrigger-C_ezbQv8.mjs";
+import { $ as $40df3f8667284809$export$d55e7ee900f34e93 } from "./useDialog-mJmFmECS.mjs";
 import { flushSync } from "react-dom";
-import { $ as $f2f8a6077418541e$export$542a6fd13ac93354, a as $86ea4cb521eb2e37$export$2317d149ed6f78c4 } from "./utilities-CczOI9Hn.mjs";
+import { $ as $3ad3f6e1647bc98d$export$80f3e147d781571c } from "./focusSafely-MpYXzuLP.mjs";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-BZH2zfKM.mjs";
+import { $ as $f2f8a6077418541e$export$542a6fd13ac93354, a as $86ea4cb521eb2e37$export$2317d149ed6f78c4 } from "./utilities-9S1EwfZA.mjs";
 function $d3f049242431219c$export$6d3443f2c48bfc20(ref, isReady = true) {
   let [isEntering, setEntering] = useState(true);
   let isAnimationReady = isEntering && isReady;
@@ -110,6 +112,7 @@ const $44f671af83e7d9e0$export$2de4954e8ae13b9f = /* @__PURE__ */ createContext(
   placement: "bottom"
 });
 const $07b14b47974efb58$export$9b9a0cd73afb7ca4 = /* @__PURE__ */ createContext(null);
+const $07b14b47974efb58$var$PopoverGroupContext = /* @__PURE__ */ createContext(null);
 const $07b14b47974efb58$export$5b6b19405a83ff9d = /* @__PURE__ */ forwardRef(function Popover(props, ref) {
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $07b14b47974efb58$export$9b9a0cd73afb7ca4);
   let contextState = useContext($de32f1b87079253c$export$d2f961adcb0afbe);
@@ -117,6 +120,7 @@ const $07b14b47974efb58$export$5b6b19405a83ff9d = /* @__PURE__ */ forwardRef(fun
   let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
   let isExiting = $d3f049242431219c$export$45fda7c47f93fd48(ref, state.isOpen) || props.isExiting || false;
   let isHidden = $f39a9eba43920ace$export$b5d7cc18bb8d2b59();
+  let { direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
   if (isHidden) {
     let children = props.children;
     if (typeof children === "function") children = children({
@@ -133,13 +137,17 @@ const $07b14b47974efb58$export$5b6b19405a83ff9d = /* @__PURE__ */ forwardRef(fun
     triggerRef: props.triggerRef,
     state,
     popoverRef: ref,
-    isExiting
+    isExiting,
+    dir: direction
   }));
 });
 function $07b14b47974efb58$var$PopoverInner(_a) {
   var _b = _a, { state, isExiting, UNSTABLE_portalContainer } = _b, props = __objRest(_b, ["state", "isExiting", "UNSTABLE_portalContainer"]);
   let arrowRef = useRef(null);
   let [arrowWidth, setArrowWidth] = useState(0);
+  let containerRef = useRef(null);
+  let groupCtx = useContext($07b14b47974efb58$var$PopoverGroupContext);
+  let isSubPopover = groupCtx && props.trigger === "SubmenuTrigger";
   $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
     if (arrowRef.current && state.isOpen) setArrowWidth(arrowRef.current.getBoundingClientRect().width);
   }, [
@@ -149,7 +157,10 @@ function $07b14b47974efb58$var$PopoverInner(_a) {
   var _props_offset;
   let { popoverProps, underlayProps, arrowProps, placement } = $f2f8a6077418541e$export$542a6fd13ac93354(__spreadProps(__spreadValues({}, props), {
     offset: (_props_offset = props.offset) !== null && _props_offset !== void 0 ? _props_offset : 8,
-    arrowSize: arrowWidth
+    arrowSize: arrowWidth,
+    // If this is a submenu/subdialog, use the root popover's container 
+    // to detect outside interaction and add aria-hidden.
+    groupRef: isSubPopover ? groupCtx : containerRef
   }), state);
   let ref = props.popoverRef;
   let isEntering = $d3f049242431219c$export$6d3443f2c48bfc20(ref, !!placement) || props.isEntering || false;
@@ -162,21 +173,30 @@ function $07b14b47974efb58$var$PopoverInner(_a) {
       isExiting
     }
   }));
+  let shouldBeDialog = !props.isNonModal || props.trigger === "SubmenuTrigger";
+  let [isDialog, setDialog] = useState(false);
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    if (ref.current) setDialog(shouldBeDialog && !ref.current.querySelector("[role=dialog]"));
+  }, [
+    ref,
+    shouldBeDialog
+  ]);
+  useEffect(() => {
+    if (isDialog && ref.current && !ref.current.contains(document.activeElement)) $3ad3f6e1647bc98d$export$80f3e147d781571c(ref.current);
+  }, [
+    isDialog,
+    ref
+  ]);
   let style = __spreadValues(__spreadValues({}, popoverProps.style), renderProps.style);
-  return /* @__PURE__ */ React__default.createElement($337b884510726a0d$export$c6fdb837b070b4ff, __spreadProps(__spreadValues({}, props), {
-    isExiting,
-    portalContainer: UNSTABLE_portalContainer
-  }), !props.isNonModal && state.isOpen && /* @__PURE__ */ React__default.createElement("div", __spreadProps(__spreadValues({
-    "data-testid": "underlay"
-  }, underlayProps), {
-    style: {
-      position: "fixed",
-      inset: 0
-    }
-  })), /* @__PURE__ */ React__default.createElement("div", __spreadProps(__spreadValues(__spreadValues({}, $3ef42575df84b30b$export$9d1611c77c2fe928($65484d02dcb7eb3e$export$457c3d6518dd4c6f(props), popoverProps)), renderProps), {
+  let overlay = /* @__PURE__ */ React__default.createElement("div", __spreadProps(__spreadValues(__spreadValues({}, $3ef42575df84b30b$export$9d1611c77c2fe928($65484d02dcb7eb3e$export$457c3d6518dd4c6f(props), popoverProps)), renderProps), {
+    role: isDialog ? "dialog" : void 0,
+    tabIndex: isDialog ? -1 : void 0,
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"],
     ref,
     slot: props.slot || void 0,
     style,
+    dir: props.dir,
     "data-trigger": props.trigger,
     "data-placement": placement,
     "data-entering": isEntering || void 0,
@@ -190,7 +210,32 @@ function $07b14b47974efb58$var$PopoverInner(_a) {
     })
   }, renderProps.children), /* @__PURE__ */ React__default.createElement($86ea4cb521eb2e37$export$2317d149ed6f78c4, {
     onDismiss: state.close
-  })));
+  }));
+  if (!isSubPopover) return /* @__PURE__ */ React__default.createElement($337b884510726a0d$export$c6fdb837b070b4ff, __spreadProps(__spreadValues({}, props), {
+    shouldContainFocus: isDialog,
+    isExiting,
+    portalContainer: UNSTABLE_portalContainer
+  }), !props.isNonModal && state.isOpen && /* @__PURE__ */ React__default.createElement("div", __spreadProps(__spreadValues({
+    "data-testid": "underlay"
+  }, underlayProps), {
+    style: {
+      position: "fixed",
+      inset: 0
+    }
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    ref: containerRef,
+    style: {
+      display: "contents"
+    }
+  }, /* @__PURE__ */ React__default.createElement($07b14b47974efb58$var$PopoverGroupContext.Provider, {
+    value: containerRef
+  }, overlay)));
+  var _ref;
+  return /* @__PURE__ */ React__default.createElement($337b884510726a0d$export$c6fdb837b070b4ff, __spreadProps(__spreadValues({}, props), {
+    shouldContainFocus: isDialog,
+    isExiting,
+    portalContainer: (_ref = UNSTABLE_portalContainer !== null && UNSTABLE_portalContainer !== void 0 ? UNSTABLE_portalContainer : groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.current) !== null && _ref !== void 0 ? _ref : void 0
+  }), overlay);
 }
 const $3674c52c6b3c5bce$export$795aec4671cbae19 = /* @__PURE__ */ createContext(null);
 const $de32f1b87079253c$export$8b93a07348a7730c = /* @__PURE__ */ createContext(null);
@@ -221,7 +266,8 @@ function $de32f1b87079253c$export$2e1e1122cf0cba88(props) {
         $07b14b47974efb58$export$9b9a0cd73afb7ca4,
         {
           trigger: "DialogTrigger",
-          triggerRef: buttonRef
+          triggerRef: buttonRef,
+          "aria-labelledby": overlayProps["aria-labelledby"]
         }
       ]
     ]