@abgov/react-components 4.0.0-alpha.139 → 4.0.0-alpha.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.139",
+  "version": "4.0.0-alpha.140",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -13034,7 +13034,7 @@ function create_if_block$a(ctx) {
     }
 
   };
-} // (132:8) {#if calloutvariant !== null}
+} // (137:8) {#if calloutvariant !== null}
 
 
 function create_if_block_3$4(ctx) {
@@ -13093,7 +13093,7 @@ function create_if_block_3$4(ctx) {
     }
 
   };
-} // (145:14) {:else}
+} // (150:14) {:else}
 
 
 function create_else_block$4(ctx) {
@@ -13115,7 +13115,7 @@ function create_else_block$4(ctx) {
     }
 
   };
-} // (143:14) {#if heading}
+} // (148:14) {#if heading}
 
 
 function create_if_block_2$4(ctx) {
@@ -13144,7 +13144,7 @@ function create_if_block_2$4(ctx) {
     }
 
   };
-} // (149:12) {#if _isClosable}
+} // (154:12) {#if _isClosable}
 
 
 function create_if_block_1$4(ctx) {
@@ -13253,8 +13253,6 @@ function create_fragment$k(ctx) {
 function instance$i($$self, $$props, $$invalidate) {
   let _isClosable;
 
-  let _isOpen;
-
   let _transitionTime;
 
   let _iconType;
@@ -13284,9 +13282,14 @@ function instance$i($$self, $$props, $$invalidate) {
   let _headerEl = null; // Type verification
 
   const [CALLOUT_VARIANT, validateCalloutVariant] = typeValidator("Callout variant", ["emergency", "important", "information", "success", "event"]);
-  const [Transitions, validateTransition] = typeValidator("Modal transition", ["fast", "slow", "none"]); // Hooks
+  const [Transitions, validateTransition] = typeValidator("Modal transition", ["fast", "slow", "none"]); // Moving the reactive var into a timeout prevents accessing null stylesheet
+  // reference to allow for creation of the @keyframes for the in:fade and out:fade transitions.
+  // DDIDS-1288
 
-  onMount(() => {
+  let _isOpen = false; // Hooks
+
+  onMount(async () => {
+    await tick();
     validateCalloutVariant(calloutvariant);
     validateTransition(transition);
   }); // Functions
@@ -13388,7 +13391,7 @@ function instance$i($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty &
     /*open*/
     2) {
-      $$invalidate(7, _isOpen = toBoolean(open));
+      setTimeout(() => $$invalidate(7, _isOpen = toBoolean(open)), 1);
     }
 
     if ($$self.$$.dirty &

package/react-components.umd.js

@@ -13080,7 +13080,7 @@
 	    }
 
 	  };
-	} // (132:8) {#if calloutvariant !== null}
+	} // (137:8) {#if calloutvariant !== null}
 
 
 	function create_if_block_3$4(ctx) {
@@ -13139,7 +13139,7 @@
 	    }
 
 	  };
-	} // (145:14) {:else}
+	} // (150:14) {:else}
 
 
 	function create_else_block$4(ctx) {
@@ -13161,7 +13161,7 @@
 	    }
 
 	  };
-	} // (143:14) {#if heading}
+	} // (148:14) {#if heading}
 
 
 	function create_if_block_2$4(ctx) {
@@ -13190,7 +13190,7 @@
 	    }
 
 	  };
-	} // (149:12) {#if _isClosable}
+	} // (154:12) {#if _isClosable}
 
 
 	function create_if_block_1$4(ctx) {
@@ -13299,8 +13299,6 @@
 	function instance$i($$self, $$props, $$invalidate) {
 	  let _isClosable;
 
-	  let _isOpen;
-
 	  let _transitionTime;
 
 	  let _iconType;
@@ -13330,11 +13328,17 @@
 	  let _headerEl = null; // Type verification
 
 	  const [CALLOUT_VARIANT, validateCalloutVariant] = typeValidator("Callout variant", ["emergency", "important", "information", "success", "event"]);
-	  const [Transitions, validateTransition] = typeValidator("Modal transition", ["fast", "slow", "none"]); // Hooks
+	  const [Transitions, validateTransition] = typeValidator("Modal transition", ["fast", "slow", "none"]); // Moving the reactive var into a timeout prevents accessing null stylesheet
+	  // reference to allow for creation of the @keyframes for the in:fade and out:fade transitions.
+	  // DDIDS-1288
 
-	  onMount(() => {
-	    validateCalloutVariant(calloutvariant);
-	    validateTransition(transition);
+	  let _isOpen = false; // Hooks
+
+	  onMount(function () {
+	    return _call(tick, function () {
+	      validateCalloutVariant(calloutvariant);
+	      validateTransition(transition);
+	    });
 	  }); // Functions
 
 	  function close(e) {
@@ -13434,7 +13438,7 @@
 	    if ($$self.$$.dirty &
 	    /*open*/
 	    2) {
-	      $$invalidate(7, _isOpen = toBoolean(open));
+	      setTimeout(() => $$invalidate(7, _isOpen = toBoolean(open)), 1);
 	    }
 
 	    if ($$self.$$.dirty &