@easypost/easy-ui 1.0.0-alpha.93 → 1.0.0-alpha.94

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @easypost/easy-ui
 
+## 1.0.0-alpha.94
+
+### Minor Changes
+
+- 6166055: feat(Modal): add nesting support
+
 ## 1.0.0-alpha.93
 
 ### Minor Changes

package/Modal/Modal.stories.d.ts

@@ -12,4 +12,5 @@ export declare const Size: ModalStory;
 export declare const DefaultOpen: ModalTriggerStory;
 export declare const Controlled: ModalTriggerStory;
 export declare const MenuTrigger: ModalTriggerStory;
+export declare const Nested: ModalTriggerStory;
 //# 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"}
+{"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"}

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,EAKV,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,qBAmDxD"}
+{"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"}

package/Modal/index.js

@@ -65,21 +65,21 @@ 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";
+const underlayBg = "_underlayBg_1i8y3_4";
+const underlayBox = "_underlayBox_1i8y3_30";
+const underlayEdge = "_underlayEdge_1i8y3_38";
+const Modal$1 = "_Modal_1i8y3_44";
+const header = "_header_1i8y3_62";
+const stuck = "_stuck_1i8y3_68";
+const body = "_body_1i8y3_72";
+const content = "_content_1i8y3_79";
+const footer = "_footer_1i8y3_96";
+const closeBtn = "_closeBtn_1i8y3_113";
+const iconAtEnd = "_iconAtEnd_1i8y3_127";
+const sizeSm = "_sizeSm_1i8y3_133";
+const sizeMd = "_sizeMd_1i8y3_137";
+const sizeLg = "_sizeLg_1i8y3_141";
+const sizeXl = "_sizeXl_1i8y3_145";
 const styles = {
   underlayBg,
   underlayBox,
@@ -213,10 +213,6 @@ function ModalTrigger(props) {
 function ModalContainer(props) {
   const { children, isDismissable = true, onDismiss = () => {
   } } = props;
-  const existingModalTriggerContext = React.useContext(ModalTriggerContext);
-  if (existingModalTriggerContext) {
-    throw new Error("Modal.Container must be used outside of a Modal.Trigger");
-  }
   const childArray = React.Children.toArray(children);
   if (childArray.length > 1) {
     throw new Error("Only a single child can be passed to ModalContainer.");

package/Modal/index.mjs

@@ -63,21 +63,21 @@ 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";
+const underlayBg = "_underlayBg_1i8y3_4";
+const underlayBox = "_underlayBox_1i8y3_30";
+const underlayEdge = "_underlayEdge_1i8y3_38";
+const Modal$1 = "_Modal_1i8y3_44";
+const header = "_header_1i8y3_62";
+const stuck = "_stuck_1i8y3_68";
+const body = "_body_1i8y3_72";
+const content = "_content_1i8y3_79";
+const footer = "_footer_1i8y3_96";
+const closeBtn = "_closeBtn_1i8y3_113";
+const iconAtEnd = "_iconAtEnd_1i8y3_127";
+const sizeSm = "_sizeSm_1i8y3_133";
+const sizeMd = "_sizeMd_1i8y3_137";
+const sizeLg = "_sizeLg_1i8y3_141";
+const sizeXl = "_sizeXl_1i8y3_145";
 const styles = {
   underlayBg,
   underlayBox,
@@ -211,10 +211,6 @@ function ModalTrigger(props) {
 function ModalContainer(props) {
   const { children, isDismissable = true, onDismiss = () => {
   } } = props;
-  const existingModalTriggerContext = useContext(ModalTriggerContext);
-  if (existingModalTriggerContext) {
-    throw new Error("Modal.Container must be used outside of a Modal.Trigger");
-  }
   const childArray = React__default.Children.toArray(children);
   if (childArray.length > 1) {
     throw new Error("Only a single child can be passed to ModalContainer.");

package/package.json

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

package/style.css

@@ -4961,7 +4961,7 @@ textarea {
 }/**
  * Do not edit directly, this file was auto-generated.
  */
-._underlayBg_12m01_4 {
+._underlayBg_1i8y3_4 {
   --ezui-c-modal-underlay-edge-max-height: 72px;
   --ezui-c-modal-underlay-edge-min-height: 2.5vh;
   position: fixed;
@@ -4969,22 +4969,25 @@ textarea {
   display: flex;
   flex-direction: column;
 }
-._underlayBg_12m01_4::before {
+._underlayBg_1i8y3_4::before {
   content: "";
   position: absolute;
   background: var(--ezui-color-primary-800);
   opacity: var(--ezui-opacity-underlay);
 }
+._underlayBg_1i8y3_4[aria-hidden=true] {
+  display: none;
+}
 
-._underlayBg_12m01_4,
-._underlayBg_12m01_4::before {
+._underlayBg_1i8y3_4,
+._underlayBg_1i8y3_4::before {
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
 }
 
-._underlayBox_12m01_27 {
+._underlayBox_1i8y3_30 {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -4992,13 +4995,13 @@ textarea {
   pointer-events: none;
 }
 
-._underlayEdge_12m01_35 {
+._underlayEdge_1i8y3_38 {
   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_1i8y3_44 {
   --ezui-c-modal-max-height: 762px;
   --ezui-c-modal-width: 95vw;
   flex: 0 1 auto;
@@ -5016,41 +5019,41 @@ textarea {
   outline: none;
 }
 
-._header_12m01_59 {
+._header_1i8y3_62 {
   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_1i8y3_62._stuck_1i8y3_68 {
   box-shadow: var(--ezui-shadow-stuck-from-top);
 }
 
-._body_12m01_69 {
+._body_1i8y3_72 {
   overflow: auto;
   display: flex;
   flex-direction: column;
   overscroll-behavior: contain;
 }
 
-._content_12m01_76 {
+._content_1i8y3_79 {
   padding: 0 var(--ezui-space-5);
   position: relative;
 }
-._content_12m01_76 [data-intercept] {
+._content_1i8y3_79 [data-intercept] {
   position: absolute;
   left: 0;
   width: 1px;
   height: 1px;
 }
-._content_12m01_76 [data-intercept="header"] {
+._content_1i8y3_79 [data-intercept="header"] {
   top: 0;
 }
-._content_12m01_76 [data-intercept="footer"] {
+._content_1i8y3_79 [data-intercept="footer"] {
   bottom: 0;
 }
 
-._footer_12m01_93 {
+._footer_1i8y3_96 {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -5059,15 +5062,15 @@ textarea {
   padding-top: var(--ezui-space-3);
 }
 @media (min-width: 30em) {
-  ._footer_12m01_93 {
+  ._footer_1i8y3_96 {
     flex-direction: row;
   }
 }
-._footer_12m01_93._stuck_12m01_65 {
+._footer_1i8y3_96._stuck_1i8y3_68 {
   box-shadow: var(--ezui-shadow-stuck-from-bottom);
 }
 
-._closeBtn_12m01_110 {
+._closeBtn_1i8y3_113 {
   appearance: none;
   margin: 0;
   padding: 0;
@@ -5081,25 +5084,25 @@ textarea {
   cursor: pointer;
 }
 
-._iconAtEnd_12m01_124[data-size="2xl"] {
+._iconAtEnd_1i8y3_127[data-size="2xl"] {
   display: inline-flex;
   margin-top: -5px;
   margin-bottom: -5px;
 }
 
-._sizeSm_12m01_130 {
+._sizeSm_1i8y3_133 {
   --ezui-c-modal-max-width: 528px;
 }
 
-._sizeMd_12m01_134 {
+._sizeMd_1i8y3_137 {
   --ezui-c-modal-max-width: 672px;
 }
 
-._sizeLg_12m01_138 {
+._sizeLg_1i8y3_141 {
   --ezui-c-modal-max-width: 788px;
 }
 
-._sizeXl_12m01_142 {
+._sizeXl_1i8y3_145 {
   --ezui-c-modal-max-width: 1000px;
 }/**
  * Do not edit directly, this file was auto-generated.