@abgov/react-components 4.0.0-alpha.22 → 4.0.0-alpha.23

package/package.json

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

package/react-components.esm.js

@@ -8459,7 +8459,7 @@ function create_if_block$7(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*fullscreen*/
-    ctx[6]) return 0;
+    ctx[4]) return 0;
     if (
     /*inline*/
     ctx[5]) return 1;
@@ -8540,7 +8540,7 @@ function create_if_block$7(ctx) {
     }
 
   };
-} // (40:19) 
+} // (39:19) 
 
 
 function create_if_block_3$1(ctx) {
@@ -8563,13 +8563,13 @@ function create_if_block_3$1(ctx) {
       ctx[0]);
       set_custom_element_data(goa_spinner, "size",
       /*spinnerSize*/
-      ctx[4]);
+      ctx[3]);
       set_custom_element_data(goa_spinner, "progress", goa_spinner_progress_value =
       /*progress*/
       ctx[2] || 0);
       attr(div, "class", div_class_value = "spinner-" +
       /*spinnerSize*/
-      ctx[4]);
+      ctx[3]);
       toggle_class(div, "inline",
       /*inline*/
       ctx[5]);
@@ -8593,10 +8593,10 @@ function create_if_block_3$1(ctx) {
 
       if (dirty &
       /*spinnerSize*/
-      16) {
+      8) {
         set_custom_element_data(goa_spinner, "size",
         /*spinnerSize*/
-        ctx[4]);
+        ctx[3]);
       }
 
       if (dirty &
@@ -8624,15 +8624,15 @@ function create_if_block_3$1(ctx) {
 
       if (dirty &
       /*spinnerSize*/
-      16 && div_class_value !== (div_class_value = "spinner-" +
+      8 && div_class_value !== (div_class_value = "spinner-" +
       /*spinnerSize*/
-      ctx[4])) {
+      ctx[3])) {
         attr(div, "class", div_class_value);
       }
 
       if (dirty &
       /*spinnerSize, inline*/
-      48) {
+      40) {
         toggle_class(div, "inline",
         /*inline*/
         ctx[5]);
@@ -8648,7 +8648,7 @@ function create_if_block_3$1(ctx) {
     }
 
   };
-} // (29:2) {#if fullscreen}
+} // (28:2) {#if fullscreen}
 
 
 function create_if_block_1$4(ctx) {
@@ -8674,13 +8674,13 @@ function create_if_block_1$4(ctx) {
       ctx[0]);
       set_custom_element_data(goa_spinner, "size",
       /*spinnerSize*/
-      ctx[4]);
+      ctx[3]);
       set_custom_element_data(goa_spinner, "progress", goa_spinner_progress_value =
       /*progress*/
       ctx[2] || 0);
       toggle_class(div, "fullscreen",
       /*fullscreen*/
-      ctx[6]);
+      ctx[4]);
     },
 
     m(target, anchor) {
@@ -8709,10 +8709,10 @@ function create_if_block_1$4(ctx) {
 
       if (!current || dirty &
       /*spinnerSize*/
-      16) {
+      8) {
         set_custom_element_data(goa_spinner, "size",
         /*spinnerSize*/
-        ctx[4]);
+        ctx[3]);
       }
 
       if (!current || dirty &
@@ -8740,10 +8740,10 @@ function create_if_block_1$4(ctx) {
 
       if (dirty &
       /*fullscreen*/
-      64) {
+      16) {
         toggle_class(div, "fullscreen",
         /*fullscreen*/
-        ctx[6]);
+        ctx[4]);
       }
     },
 
@@ -8775,7 +8775,7 @@ function create_if_block_1$4(ctx) {
     }
 
   };
-} // (43:6) {#if message}
+} // (42:6) {#if message}
 
 
 function create_if_block_4(ctx) {
@@ -8808,7 +8808,7 @@ function create_if_block_4(ctx) {
     }
 
   };
-} // (36:6) {#if message}
+} // (35:6) {#if message}
 
 
 function create_if_block_2$3(ctx) {
@@ -8847,8 +8847,8 @@ function create_fragment$f(ctx) {
   let if_block_anchor;
   let current;
   let if_block =
-  /*ready*/
-  ctx[3] && create_if_block$7(ctx);
+  /*isVisible*/
+  ctx[6] && create_if_block$7(ctx);
   return {
     c() {
       if (if_block) if_block.c();
@@ -8864,14 +8864,14 @@ function create_fragment$f(ctx) {
 
     p(ctx, [dirty]) {
       if (
-      /*ready*/
-      ctx[3]) {
+      /*isVisible*/
+      ctx[6]) {
         if (if_block) {
           if_block.p(ctx, dirty);
 
           if (dirty &
-          /*ready*/
-          8) {
+          /*isVisible*/
+          64) {
             transition_in(if_block, 1);
           }
         } else {
@@ -8910,9 +8910,6 @@ function create_fragment$f(ctx) {
 
 function instance$e($$self, $$props, $$invalidate) {
   let isVisible;
-  let fullscreen;
-  let inline;
-  let spinnerSize;
   let {
     type = "infinite"
   } = $$props;
@@ -8931,11 +8928,13 @@ function instance$e($$self, $$props, $$invalidate) {
   let {
     visible = "false"
   } = $$props;
-  let ready = false;
+  let spinnerSize;
+  let fullscreen;
+  let inline;
   onMount(async () => {
-    // there needs to be a slight delay in the render to prevent an invalid spinner size from being shown
-    await tick();
-    $$invalidate(3, ready = isVisible);
+    $$invalidate(3, spinnerSize = size === "small" ? "large" : "xlarge");
+    $$invalidate(4, fullscreen = variant === "fullscreen");
+    $$invalidate(5, inline = variant === "inline");
   });
 
   $$self.$$set = $$props => {
@@ -8951,29 +8950,11 @@ function instance$e($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty &
     /*visible*/
     512) {
-      isVisible = toBoolean(visible);
-    }
-
-    if ($$self.$$.dirty &
-    /*variant*/
-    128) {
-      $$invalidate(6, fullscreen = variant === "fullscreen");
-    }
-
-    if ($$self.$$.dirty &
-    /*variant*/
-    128) {
-      $$invalidate(5, inline = variant === "inline");
-    }
-
-    if ($$self.$$.dirty &
-    /*size*/
-    256) {
-      $$invalidate(4, spinnerSize = size === "small" ? "large" : "xlarge");
+      $$invalidate(6, isVisible = toBoolean(visible));
     }
   };
 
-  return [type, message, progress, ready, spinnerSize, inline, fullscreen, variant, size, visible];
+  return [type, message, progress, spinnerSize, fullscreen, inline, isVisible, variant, size, visible];
 }
 
 class CircularProgress extends SvelteElement {

package/react-components.umd.js

@@ -8502,7 +8502,7 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*fullscreen*/
-	    ctx[6]) return 0;
+	    ctx[4]) return 0;
 	    if (
 	    /*inline*/
 	    ctx[5]) return 1;
@@ -8583,7 +8583,7 @@
 	    }
 
 	  };
-	} // (40:19) 
+	} // (39:19) 
 
 
 	function create_if_block_3$1(ctx) {
@@ -8606,13 +8606,13 @@
 	      ctx[0]);
 	      set_custom_element_data(goa_spinner, "size",
 	      /*spinnerSize*/
-	      ctx[4]);
+	      ctx[3]);
 	      set_custom_element_data(goa_spinner, "progress", goa_spinner_progress_value =
 	      /*progress*/
 	      ctx[2] || 0);
 	      attr(div, "class", div_class_value = "spinner-" +
 	      /*spinnerSize*/
-	      ctx[4]);
+	      ctx[3]);
 	      toggle_class(div, "inline",
 	      /*inline*/
 	      ctx[5]);
@@ -8636,10 +8636,10 @@
 
 	      if (dirty &
 	      /*spinnerSize*/
-	      16) {
+	      8) {
 	        set_custom_element_data(goa_spinner, "size",
 	        /*spinnerSize*/
-	        ctx[4]);
+	        ctx[3]);
 	      }
 
 	      if (dirty &
@@ -8667,15 +8667,15 @@
 
 	      if (dirty &
 	      /*spinnerSize*/
-	      16 && div_class_value !== (div_class_value = "spinner-" +
+	      8 && div_class_value !== (div_class_value = "spinner-" +
 	      /*spinnerSize*/
-	      ctx[4])) {
+	      ctx[3])) {
 	        attr(div, "class", div_class_value);
 	      }
 
 	      if (dirty &
 	      /*spinnerSize, inline*/
-	      48) {
+	      40) {
 	        toggle_class(div, "inline",
 	        /*inline*/
 	        ctx[5]);
@@ -8691,7 +8691,7 @@
 	    }
 
 	  };
-	} // (29:2) {#if fullscreen}
+	} // (28:2) {#if fullscreen}
 
 
 	function create_if_block_1$4(ctx) {
@@ -8717,13 +8717,13 @@
 	      ctx[0]);
 	      set_custom_element_data(goa_spinner, "size",
 	      /*spinnerSize*/
-	      ctx[4]);
+	      ctx[3]);
 	      set_custom_element_data(goa_spinner, "progress", goa_spinner_progress_value =
 	      /*progress*/
 	      ctx[2] || 0);
 	      toggle_class(div, "fullscreen",
 	      /*fullscreen*/
-	      ctx[6]);
+	      ctx[4]);
 	    },
 
 	    m(target, anchor) {
@@ -8752,10 +8752,10 @@
 
 	      if (!current || dirty &
 	      /*spinnerSize*/
-	      16) {
+	      8) {
 	        set_custom_element_data(goa_spinner, "size",
 	        /*spinnerSize*/
-	        ctx[4]);
+	        ctx[3]);
 	      }
 
 	      if (!current || dirty &
@@ -8783,10 +8783,10 @@
 
 	      if (dirty &
 	      /*fullscreen*/
-	      64) {
+	      16) {
 	        toggle_class(div, "fullscreen",
 	        /*fullscreen*/
-	        ctx[6]);
+	        ctx[4]);
 	      }
 	    },
 
@@ -8818,7 +8818,7 @@
 	    }
 
 	  };
-	} // (43:6) {#if message}
+	} // (42:6) {#if message}
 
 
 	function create_if_block_4(ctx) {
@@ -8851,7 +8851,7 @@
 	    }
 
 	  };
-	} // (36:6) {#if message}
+	} // (35:6) {#if message}
 
 
 	function create_if_block_2$3(ctx) {
@@ -8890,8 +8890,8 @@
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
-	  /*ready*/
-	  ctx[3] && create_if_block$7(ctx);
+	  /*isVisible*/
+	  ctx[6] && create_if_block$7(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -8907,14 +8907,14 @@
 
 	    p(ctx, [dirty]) {
 	      if (
-	      /*ready*/
-	      ctx[3]) {
+	      /*isVisible*/
+	      ctx[6]) {
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 
 	          if (dirty &
-	          /*ready*/
-	          8) {
+	          /*isVisible*/
+	          64) {
 	            transition_in(if_block, 1);
 	          }
 	        } else {
@@ -8953,9 +8953,6 @@
 
 	function instance$e($$self, $$props, $$invalidate) {
 	  let isVisible;
-	  let fullscreen;
-	  let inline;
-	  let spinnerSize;
 	  let {
 	    type = "infinite"
 	  } = $$props;
@@ -8974,13 +8971,15 @@
 	  let {
 	    visible = "false"
 	  } = $$props;
-	  let ready = false;
-	  onMount(function () {
-	    // there needs to be a slight delay in the render to prevent an invalid spinner size from being shown
-	    return _call(tick, function () {
-	      $$invalidate(3, ready = isVisible);
-	    });
-	  });
+	  let spinnerSize;
+	  let fullscreen;
+	  let inline;
+	  onMount(_async(function () {
+	    $$invalidate(3, spinnerSize = size === "small" ? "large" : "xlarge");
+	    $$invalidate(4, fullscreen = variant === "fullscreen");
+	    $$invalidate(5, inline = variant === "inline");
+	    return _await();
+	  }));
 
 	  $$self.$$set = $$props => {
 	    if ('type' in $$props) $$invalidate(0, type = $$props.type);
@@ -8995,29 +8994,11 @@
 	    if ($$self.$$.dirty &
 	    /*visible*/
 	    512) {
-	      isVisible = toBoolean(visible);
-	    }
-
-	    if ($$self.$$.dirty &
-	    /*variant*/
-	    128) {
-	      $$invalidate(6, fullscreen = variant === "fullscreen");
-	    }
-
-	    if ($$self.$$.dirty &
-	    /*variant*/
-	    128) {
-	      $$invalidate(5, inline = variant === "inline");
-	    }
-
-	    if ($$self.$$.dirty &
-	    /*size*/
-	    256) {
-	      $$invalidate(4, spinnerSize = size === "small" ? "large" : "xlarge");
+	      $$invalidate(6, isVisible = toBoolean(visible));
 	    }
 	  };
 
-	  return [type, message, progress, ready, spinnerSize, inline, fullscreen, variant, size, visible];
+	  return [type, message, progress, spinnerSize, fullscreen, inline, isVisible, variant, size, visible];
 	}
 
 	class CircularProgress extends SvelteElement {