@easypost/easy-ui 1.0.0-alpha.95 → 1.0.0-alpha.97

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @easypost/easy-ui
 
+## 1.0.0-alpha.97
+
+### Patch Changes
+
+- 4aeb5f8: fix(Modal): nested modal unmount cleanup
+
+## 1.0.0-alpha.96
+
+### Patch Changes
+
+- 7670391: fix(Modal): hide parent of nested modal
+
 ## 1.0.0-alpha.95
 
 ### Patch Changes

package/Modal/Modal.stories.d.ts

@@ -13,4 +13,5 @@ export declare const DefaultOpen: ModalTriggerStory;
 export declare const Controlled: ModalTriggerStory;
 export declare const MenuTrigger: ModalTriggerStory;
 export declare const Nested: ModalTriggerStory;
+export declare const WithSelect: ModalStory;
 //# sourceMappingURL=Modal.stories.d.ts.map

package/Modal/Modal.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../src/Modal/Modal.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAQlD,OAAO,EAAE,KAAK,EAAmC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C,KAAK,UAAU,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AACzC,KAAK,iBAAiB,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAQ5B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,MAAM,EAAE,UAkBpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,UA6CtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,iBA6B5B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,UAwBlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,iBAwBzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,iBAwBxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,iBAyBzB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,iBA4FpB,CAAC"}
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../src/Modal/Modal.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAQlD,OAAO,EAAE,KAAK,EAAmC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C,KAAK,UAAU,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AACzC,KAAK,iBAAiB,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAQ5B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,MAAM,EAAE,UAkBpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,UA6CtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,iBA6B5B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,UAwBlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,iBAwBzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,iBAwBxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,iBAyBzB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,iBA4FpB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,UAqBxB,CAAC"}

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,EAEZ,SAAS,EAIV,MAAM,OAAO,CAAC;AAMf,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,qBA8CxD"}
+{"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"}

package/Modal/ModalHeader.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { IconSymbol } from "../types";
 export type ModalHeaderProps = {
     /**
@@ -10,11 +10,11 @@ export type ModalHeaderProps = {
     /**
      * The content for the title of the modal.
      */
-    children: string;
+    children: ReactNode;
     /**
      * The content for the subtitle of the modal.
      */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /**
      * Icon to display at the start of the header title.
      */

package/Modal/ModalHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../src/Modal/ModalHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAMtC,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE7C;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,MAAM,EAAE,UAAU,CAAC;KACpB,CAAC;IAEF;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,MAAM,EAAE,UAAU,CAAC;QACnB,IAAI,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;KACrB,CAAC;CACH,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBA+ClD"}
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../src/Modal/ModalHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAMtC,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE7C;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,MAAM,EAAE,UAAU,CAAC;KACpB,CAAC;IAEF;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,MAAM,EAAE,UAAU,CAAC;QACnB,IAAI,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;KACrB,CAAC;CACH,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBA+ClD"}

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,EAAyB,MAAM,OAAO,CAAC;AAMnE,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,qBAkCpD"}
+{"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"}

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;AAIpD,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,qBA0BtD"}
+{"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"}

package/Modal/context.d.ts

@@ -1,3 +1,4 @@
+import React, { ReactNode } from "react";
 import { FocusableElement } from "@react-types/shared";
 import { DOMAttributes, RefObject } from "react";
 import { OverlayTriggerState } from "react-stately";
@@ -13,11 +14,17 @@ export type ModalContextType = {
 type ModalTriggerContextType = {
     isDismissable: boolean;
     state: OverlayTriggerState;
+    hasOpenNestedModal: boolean;
+    setHasOpenNestedModal: (hasOpenNestedModal: boolean) => void;
 };
-export declare const ModalContext: import("react").Context<ModalContextType | null>;
+export type ModalTriggerProviderProps = Pick<ModalTriggerContextType, "state" | "isDismissable"> & {
+    children: ReactNode;
+};
+export declare const ModalContext: React.Context<ModalContextType | null>;
 export declare const useModalContext: () => ModalContextType;
-export declare const ModalTriggerContext: import("react").Context<ModalTriggerContextType | null>;
+export declare const ModalTriggerContext: React.Context<ModalTriggerContextType | null>;
 export declare const useModalTriggerContext: () => ModalTriggerContextType;
 export declare const useModalTrigger: () => OverlayTriggerState;
+export declare function ModalTriggerProvider({ state, isDismissable, children, }: ModalTriggerProviderProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=context.d.ts.map

package/Modal/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/Modal/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEpD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC7C,UAAU,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC5C,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACnC,oBAAoB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAChD,oBAAoB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACjD,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,mBAAmB,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,YAAY,kDAA+C,CAAC;AAEzE,eAAO,MAAM,eAAe,wBAM3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,yDACqB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,+BAMlC,CAAC;AAEF,eAAO,MAAM,eAAe,2BAG3B,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/Modal/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EACL,aAAa,EACb,SAAS,EAMV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEpD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC7C,UAAU,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC5C,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACnC,oBAAoB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAChD,oBAAoB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACjD,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,mBAAmB,CAAC;IAC3B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,CAAC,kBAAkB,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,uBAAuB,EACvB,OAAO,GAAG,eAAe,CAC1B,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,wCAA+C,CAAC;AAEzE,eAAO,MAAM,eAAe,wBAM3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CACqB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,+BAMlC,CAAC;AAEF,eAAO,MAAM,eAAe,2BAG3B,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,aAAa,EACb,QAAQ,GACT,EAAE,yBAAyB,qBA2B3B"}

package/Modal/index.js

@@ -65,23 +65,53 @@ const useModalTrigger = () => {
   const modalTriggerContext = useModalTriggerContext();
   return modalTriggerContext.state;
 };
-const underlayBg = "_underlayBg_12m01_4";
-const underlayBox = "_underlayBox_12m01_27";
-const underlayEdge = "_underlayEdge_12m01_35";
-const Modal$1 = "_Modal_12m01_41";
-const header = "_header_12m01_59";
-const stuck = "_stuck_12m01_65";
-const body = "_body_12m01_69";
-const content = "_content_12m01_76";
-const footer = "_footer_12m01_93";
-const closeBtn = "_closeBtn_12m01_110";
-const iconAtEnd = "_iconAtEnd_12m01_124";
-const sizeSm = "_sizeSm_12m01_130";
-const sizeMd = "_sizeMd_12m01_134";
-const sizeLg = "_sizeLg_12m01_138";
-const sizeXl = "_sizeXl_12m01_142";
+function ModalTriggerProvider({ state, isDismissable, children }) {
+  const parentContext = React.useContext(ModalTriggerContext);
+  const [hasOpenNestedModal, setHasOpenNestedModal] = React.useState(false);
+  const context = React.useMemo(() => {
+    return {
+      hasOpenNestedModal,
+      setHasOpenNestedModal,
+      state,
+      isDismissable
+    };
+  }, [hasOpenNestedModal, state, isDismissable]);
+  React.useLayoutEffect(() => {
+    if (parentContext && state.isOpen && !parentContext.hasOpenNestedModal) {
+      parentContext.setHasOpenNestedModal(true);
+    }
+    if (parentContext && !state.isOpen && parentContext.hasOpenNestedModal) {
+      parentContext.setHasOpenNestedModal(false);
+    }
+    return () => {
+      if (parentContext && parentContext.hasOpenNestedModal) {
+        parentContext.setHasOpenNestedModal(false);
+      }
+    };
+  }, [parentContext, state.isOpen]);
+  return React.createElement(ModalTriggerContext.Provider, {
+    value: context
+  }, children);
+}
+const underlayBg = "_underlayBg_w1orl_4";
+const underlayBgHidden = "_underlayBgHidden_w1orl_27";
+const underlayBox = "_underlayBox_w1orl_31";
+const underlayEdge = "_underlayEdge_w1orl_39";
+const Modal$1 = "_Modal_w1orl_45";
+const header = "_header_w1orl_63";
+const stuck = "_stuck_w1orl_69";
+const body = "_body_w1orl_73";
+const content = "_content_w1orl_80";
+const footer = "_footer_w1orl_97";
+const closeBtn = "_closeBtn_w1orl_114";
+const iconAtEnd = "_iconAtEnd_w1orl_128";
+const sizeSm = "_sizeSm_w1orl_134";
+const sizeMd = "_sizeMd_w1orl_138";
+const sizeLg = "_sizeLg_w1orl_142";
+const sizeXl = "_sizeXl_w1orl_146";
 const styles = {
   underlayBg,
+  underlayBgHidden,
   underlayBox,
   underlayEdge,
   Modal: Modal$1,
@@ -177,8 +207,10 @@ function ModalUnderlay(props) {
     isDismissable,
     isKeyboardDismissDisabled: !isDismissable
   }), state, ref);
+  const { hasOpenNestedModal } = useModalTriggerContext();
+  const className = utilities_css.classNames(styles.underlayBg, hasOpenNestedModal && styles.underlayBgHidden);
   return React.createElement(Overlay.$337b884510726a0d$export$c6fdb837b070b4ff, null, React.createElement("div", __spreadValues({
-    className: styles.underlayBg
+    className
   }, underlayProps), React.createElement("div", __spreadProps(__spreadValues({}, modalProps), {
     ref,
     className: styles.underlayBox
@@ -198,14 +230,9 @@ function ModalTrigger(props) {
     throw new Error("children must be exactly one trigger element and one modal element");
   }
   const [trigger, modal] = children;
-  const context = React.useMemo(() => {
-    return {
-      state,
-      isDismissable
-    };
-  }, [isDismissable, state]);
-  return React.createElement(ModalTriggerContext.Provider, {
-    value: context
+  return React.createElement(ModalTriggerProvider, {
+    state,
+    isDismissable
   }, React.cloneElement(trigger, triggerProps), state.isOpen && React.createElement(ModalUnderlay, __spreadProps(__spreadValues({}, props), {
     state
   }), React.cloneElement(typeof modal === "function" ? modal(state.close) : modal, overlayProps)));
@@ -238,14 +265,9 @@ function ModalContainer(props) {
   const { overlayProps } = useOverlayTrigger.$628037886ba31236$export$f9d5c8beee7d008d({
     type: "dialog"
   }, state);
-  const context = React.useMemo(() => {
-    return {
-      state,
-      isDismissable
-    };
-  }, [state, isDismissable]);
-  return React.createElement(ModalTriggerContext.Provider, {
-    value: context
+  return React.createElement(ModalTriggerProvider, {
+    state,
+    isDismissable
   }, state.isOpen && React.createElement(ModalUnderlay, {
     state,
     isDismissable

package/Modal/index.mjs

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React__default, { createContext, useContext, useMemo, cloneElement, useState, useRef } from "react";
+import React__default, { createContext, useContext, useState, useMemo, useLayoutEffect, cloneElement, useRef } from "react";
 import { classNames, variationName } from "../utilities/css.mjs";
 import { useScrollbar } from "../utilities/useScrollbar.mjs";
 import { B as Button } from "../__chunks__/Button-BUkrUXzg.mjs";
@@ -63,23 +63,53 @@ const useModalTrigger = () => {
   const modalTriggerContext = useModalTriggerContext();
   return modalTriggerContext.state;
 };
-const underlayBg = "_underlayBg_12m01_4";
-const underlayBox = "_underlayBox_12m01_27";
-const underlayEdge = "_underlayEdge_12m01_35";
-const Modal$1 = "_Modal_12m01_41";
-const header = "_header_12m01_59";
-const stuck = "_stuck_12m01_65";
-const body = "_body_12m01_69";
-const content = "_content_12m01_76";
-const footer = "_footer_12m01_93";
-const closeBtn = "_closeBtn_12m01_110";
-const iconAtEnd = "_iconAtEnd_12m01_124";
-const sizeSm = "_sizeSm_12m01_130";
-const sizeMd = "_sizeMd_12m01_134";
-const sizeLg = "_sizeLg_12m01_138";
-const sizeXl = "_sizeXl_12m01_142";
+function ModalTriggerProvider({ state, isDismissable, children }) {
+  const parentContext = useContext(ModalTriggerContext);
+  const [hasOpenNestedModal, setHasOpenNestedModal] = useState(false);
+  const context = useMemo(() => {
+    return {
+      hasOpenNestedModal,
+      setHasOpenNestedModal,
+      state,
+      isDismissable
+    };
+  }, [hasOpenNestedModal, state, isDismissable]);
+  useLayoutEffect(() => {
+    if (parentContext && state.isOpen && !parentContext.hasOpenNestedModal) {
+      parentContext.setHasOpenNestedModal(true);
+    }
+    if (parentContext && !state.isOpen && parentContext.hasOpenNestedModal) {
+      parentContext.setHasOpenNestedModal(false);
+    }
+    return () => {
+      if (parentContext && parentContext.hasOpenNestedModal) {
+        parentContext.setHasOpenNestedModal(false);
+      }
+    };
+  }, [parentContext, state.isOpen]);
+  return React__default.createElement(ModalTriggerContext.Provider, {
+    value: context
+  }, children);
+}
+const underlayBg = "_underlayBg_w1orl_4";
+const underlayBgHidden = "_underlayBgHidden_w1orl_27";
+const underlayBox = "_underlayBox_w1orl_31";
+const underlayEdge = "_underlayEdge_w1orl_39";
+const Modal$1 = "_Modal_w1orl_45";
+const header = "_header_w1orl_63";
+const stuck = "_stuck_w1orl_69";
+const body = "_body_w1orl_73";
+const content = "_content_w1orl_80";
+const footer = "_footer_w1orl_97";
+const closeBtn = "_closeBtn_w1orl_114";
+const iconAtEnd = "_iconAtEnd_w1orl_128";
+const sizeSm = "_sizeSm_w1orl_134";
+const sizeMd = "_sizeMd_w1orl_138";
+const sizeLg = "_sizeLg_w1orl_142";
+const sizeXl = "_sizeXl_w1orl_146";
 const styles = {
   underlayBg,
+  underlayBgHidden,
   underlayBox,
   underlayEdge,
   Modal: Modal$1,
@@ -175,8 +205,10 @@ function ModalUnderlay(props) {
     isDismissable,
     isKeyboardDismissDisabled: !isDismissable
   }), state, ref);
+  const { hasOpenNestedModal } = useModalTriggerContext();
+  const className = classNames(styles.underlayBg, hasOpenNestedModal && styles.underlayBgHidden);
   return React__default.createElement($337b884510726a0d$export$c6fdb837b070b4ff, null, React__default.createElement("div", __spreadValues({
-    className: styles.underlayBg
+    className
   }, underlayProps), React__default.createElement("div", __spreadProps(__spreadValues({}, modalProps), {
     ref,
     className: styles.underlayBox
@@ -196,14 +228,9 @@ function ModalTrigger(props) {
     throw new Error("children must be exactly one trigger element and one modal element");
   }
   const [trigger, modal] = children;
-  const context = useMemo(() => {
-    return {
-      state,
-      isDismissable
-    };
-  }, [isDismissable, state]);
-  return React__default.createElement(ModalTriggerContext.Provider, {
-    value: context
+  return React__default.createElement(ModalTriggerProvider, {
+    state,
+    isDismissable
   }, cloneElement(trigger, triggerProps), state.isOpen && React__default.createElement(ModalUnderlay, __spreadProps(__spreadValues({}, props), {
     state
   }), cloneElement(typeof modal === "function" ? modal(state.close) : modal, overlayProps)));
@@ -236,14 +263,9 @@ function ModalContainer(props) {
   const { overlayProps } = $628037886ba31236$export$f9d5c8beee7d008d({
     type: "dialog"
   }, state);
-  const context = useMemo(() => {
-    return {
-      state,
-      isDismissable
-    };
-  }, [state, isDismissable]);
-  return React__default.createElement(ModalTriggerContext.Provider, {
-    value: context
+  return React__default.createElement(ModalTriggerProvider, {
+    state,
+    isDismissable
   }, state.isOpen && React__default.createElement(ModalUnderlay, {
     state,
     isDismissable

package/package.json

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

package/style.css

@@ -4961,7 +4961,7 @@ textarea {
 }/**
  * Do not edit directly, this file was auto-generated.
  */
-._underlayBg_12m01_4 {
+._underlayBg_w1orl_4 {
   --ezui-c-modal-underlay-edge-max-height: 72px;
   --ezui-c-modal-underlay-edge-min-height: 2.5vh;
   position: fixed;
@@ -4969,22 +4969,26 @@ textarea {
   display: flex;
   flex-direction: column;
 }
-._underlayBg_12m01_4::before {
+._underlayBg_w1orl_4::before {
   content: "";
   position: absolute;
   background: var(--ezui-color-primary-800);
   opacity: var(--ezui-opacity-underlay);
 }
 
-._underlayBg_12m01_4,
-._underlayBg_12m01_4::before {
+._underlayBg_w1orl_4,
+._underlayBg_w1orl_4::before {
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
 }
 
-._underlayBox_12m01_27 {
+._underlayBgHidden_w1orl_27 {
+  display: none;
+}
+
+._underlayBox_w1orl_31 {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -4992,13 +4996,13 @@ textarea {
   pointer-events: none;
 }
 
-._underlayEdge_12m01_35 {
+._underlayEdge_w1orl_39 {
   flex: 0 9 auto;
   height: var(--ezui-c-modal-underlay-edge-max-height);
   min-height: var(--ezui-c-modal-underlay-edge-min-height);
 }
 
-._Modal_12m01_41 {
+._Modal_w1orl_45 {
   --ezui-c-modal-max-height: 762px;
   --ezui-c-modal-width: 95vw;
   flex: 0 1 auto;
@@ -5016,41 +5020,41 @@ textarea {
   outline: none;
 }
 
-._header_12m01_59 {
+._header_w1orl_63 {
   margin: 0;
   padding: var(--ezui-space-5);
   padding-bottom: var(--ezui-space-2);
   color: var(--ezui-color-primary-800);
 }
-._header_12m01_59._stuck_12m01_65 {
+._header_w1orl_63._stuck_w1orl_69 {
   box-shadow: var(--ezui-shadow-stuck-from-top);
 }
 
-._body_12m01_69 {
+._body_w1orl_73 {
   overflow: auto;
   display: flex;
   flex-direction: column;
   overscroll-behavior: contain;
 }
 
-._content_12m01_76 {
+._content_w1orl_80 {
   padding: 0 var(--ezui-space-5);
   position: relative;
 }
-._content_12m01_76 [data-intercept] {
+._content_w1orl_80 [data-intercept] {
   position: absolute;
   left: 0;
   width: 1px;
   height: 1px;
 }
-._content_12m01_76 [data-intercept="header"] {
+._content_w1orl_80 [data-intercept="header"] {
   top: 0;
 }
-._content_12m01_76 [data-intercept="footer"] {
+._content_w1orl_80 [data-intercept="footer"] {
   bottom: 0;
 }
 
-._footer_12m01_93 {
+._footer_w1orl_97 {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -5059,15 +5063,15 @@ textarea {
   padding-top: var(--ezui-space-3);
 }
 @media (min-width: 30em) {
-  ._footer_12m01_93 {
+  ._footer_w1orl_97 {
     flex-direction: row;
   }
 }
-._footer_12m01_93._stuck_12m01_65 {
+._footer_w1orl_97._stuck_w1orl_69 {
   box-shadow: var(--ezui-shadow-stuck-from-bottom);
 }
 
-._closeBtn_12m01_110 {
+._closeBtn_w1orl_114 {
   appearance: none;
   margin: 0;
   padding: 0;
@@ -5081,25 +5085,25 @@ textarea {
   cursor: pointer;
 }
 
-._iconAtEnd_12m01_124[data-size="2xl"] {
+._iconAtEnd_w1orl_128[data-size="2xl"] {
   display: inline-flex;
   margin-top: -5px;
   margin-bottom: -5px;
 }
 
-._sizeSm_12m01_130 {
+._sizeSm_w1orl_134 {
   --ezui-c-modal-max-width: 528px;
 }
 
-._sizeMd_12m01_134 {
+._sizeMd_w1orl_138 {
   --ezui-c-modal-max-width: 672px;
 }
 
-._sizeLg_12m01_138 {
+._sizeLg_w1orl_142 {
   --ezui-c-modal-max-width: 788px;
 }
 
-._sizeXl_12m01_142 {
+._sizeXl_w1orl_146 {
   --ezui-c-modal-max-width: 1000px;
 }/**
  * Do not edit directly, this file was auto-generated.