Update JS/CSS from shiny and bslib (#1617)

Co-authored-by: Carson <[email protected]>

shiny/_versions.py

@@ -1,5 +1,5 @@
-shiny_html_deps = "1.8.1.9001"
-bslib = "0.7.0.9000"
+shiny_html_deps = "1.9.1.9000"
+bslib = "0.8.0.9000"
 htmltools = "0.5.8.9000"
 bootstrap = "5.3.1"
 requirejs = "2.3.6"

shiny/ui/busy_indicators.py

@@ -4,7 +4,7 @@
 from pathlib import Path
 from typing import get_args
 
-from htmltools import Tag, TagChild, TagList, tags
+from htmltools import TagChild, TagList, tags
 
 from .._docstring import add_example, no_example
 from .._utils import private_random_int
@@ -25,6 +25,8 @@ def options(
     spinner_size: str | None = None,
     spinner_delay: str | None = None,
     spinner_selector: str | None = None,
+    fade_opacity: float | None = None,
+    fade_selector: str | None = None,
     pulse_background: str | None = None,
     pulse_height: str | None = None,
     pulse_speed: str | None = None,
@@ -64,6 +66,12 @@ def options(
         A character string containing a CSS selector for scoping the spinner
         customization. The default (`None`) will apply the spinner customization to the
         parent element of the spinner.
+    fade_opacity
+        The opacity (a number between 0 and 1) for recalculating output. Set to 1 to
+        "disable" the fade.
+    fade_selector
+        A string containing a CSS selector for scoping the fade customization. The
+        default (`None`) applies the fade customization to the parent element.
     pulse_background
         A CCS background definition for the pulse. The default uses a
         [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)
@@ -86,6 +94,7 @@ def options(
             delay=spinner_delay,
             selector=spinner_selector,
         ),
+        fade_options(opacity=fade_opacity, selector=fade_selector),
         pulse_options(
             background=pulse_background,
             height=pulse_height,
@@ -157,8 +166,26 @@ def pulse_options(
     return tags.style(":root {" + css_vars + "}")
 
 
+def fade_options(
+    *,
+    opacity: float | None = None,
+    selector: str | None = None,
+) -> TagChild:
+    if opacity is None and selector is None:
+        return None
+
+    css_vars = f"--shiny-fade-opacity: {opacity};" if opacity else ""
+
+    id = None
+    if selector is None:
+        id = f"fade-options-{private_random_int(1000, 1000000)}"
+        selector = f":has(> #{id})"
+
+    return tags.style(f"{selector} {{ {css_vars} }}", id=id)
+
+
 @no_example()
-def use(*, spinners: bool = True, pulse: bool = True) -> Tag:
+def use(*, spinners: bool = True, pulse: bool = True, fade: bool = True) -> TagList:
     """
     Enable/disable busy indication
 
@@ -175,6 +202,9 @@ def use(*, spinners: bool = True, pulse: bool = True) -> Tag:
     pulse
         Whether to show a pulsing banner at the top of the page when the app is
         busy.
+    fade
+        Whether to fade recalculating outputs. A value of `False` is equivalent to
+        `shiny.ui.busy_indicators.options(fade_opacity=1)`.
 
     Note
     ----
@@ -198,4 +228,7 @@ def use(*, spinners: bool = True, pulse: bool = True) -> Tag:
         else:
             js += f"delete document.documentElement.dataset.{key};"
 
-    return tags.script(js)
+    return TagList(
+        tags.script(js),
+        None if fade else fade_options(opacity=1),
+    )

shiny/www/shared/_version.json

@@ -1,5 +1,5 @@
 {
   "note!": "Generated by scripts/htmlDependencies.R: do not edit by hand",
   "package": "shiny",
-  "version": "1.8.1.9001 (rstudio/shiny@0b7fda707e4846d2de06f63db312ac35dacf503a)"
+  "version": "1.9.1.9000 (rstudio/shiny@d84aa94762b4ffaf7533a007b6cb92c40f4f29af)"
 }

shiny/www/shared/bootstrap/_version.json

@@ -1,7 +1,7 @@
 {
   "note!": "Generated by scripts/htmlDependencies.R: do not edit by hand",
-  "shiny_version": "1.8.1.9001 (rstudio/shiny@0b7fda707e4846d2de06f63db312ac35dacf503a)",
-  "bslib_version": "0.7.0.9000 (rstudio/bslib@fd5c97de3b6957c6effb295f24e1739ef6f3709f)",
+  "shiny_version": "1.9.1.9000 (rstudio/shiny@d84aa94762b4ffaf7533a007b6cb92c40f4f29af)",
+  "bslib_version": "0.8.0.9000 (rstudio/bslib@556e932e5275dd2a64bf7544999abdafcf807e30)",
   "htmltools_version": "0.5.8.9000 (rstudio/htmltools@487aa0bed7313d7597b6edd5810e53cab0061198)",
   "bootstrap_version": "5.3.1"
 }

shiny/www/shared/bslib/_version.json

@@ -1,5 +1,5 @@
 {
   "note!": "Generated by scripts/htmlDependencies.R: do not edit by hand",
   "package": "bslib",
-  "version": "0.7.0.9000 (rstudio/bslib@fd5c97de3b6957c6effb295f24e1739ef6f3709f)"
+  "version": "0.8.0.9000 (rstudio/bslib@556e932e5275dd2a64bf7544999abdafcf807e30)"
 }

shiny/www/shared/sass/shiny/www/shared/shiny_scss/shiny.bootstrap5.scss

@@ -44,9 +44,9 @@ div:where(.shiny-html-output) {
   /* uiOutput()/ conditionalPanel() are "pass-through" containers when they have children. */
   &:has(> *) {
     display: contents;
-      /* Pass along styles that no longer impact the pass-through container */
+    /* Pass along styles that no longer impact the pass-through container */
     &.recalculating > * {
-      opacity: 0.3;
+      opacity: var(--_shiny-fade-opacity);
     }
   }
 }

shiny/www/shared/sass/shiny/www/shared/shiny_scss/shiny.scss

@@ -156,7 +156,8 @@ html.autoreload-enabled #shiny-disconnected-overlay.reloading {
 }
 
 .recalculating {
-  opacity: 0.3;
+  --_shiny-fade-opacity: var(--shiny-fade-opacity, 0.3);
+  opacity: var(--_shiny-fade-opacity);
   transition: opacity 250ms ease 500ms;
 }