Update to latest shiny/bslib assets

CHANGELOG.md

@@ -31,6 +31,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * Added a new `.add_sass_layer_file()` method to `ui.Theme` that supports reading a Sass file with layer boundary comments, e.g. `/*-- scss:defaults --*/`. This format [is supported by Quarto](https://quarto.org/docs/output-formats/html-themes-more.html#bootstrap-bootswatch-layering) and makes it easier to store Sass rules and declarations that need to be woven into Shiny's Sass Bootstrap files. (#1790)
 
+* `ui.input_text()`, `ui.input_text_area()`, `ui.input_numeric()` and `ui.input_password()` all gain an `update_on` option. `update_on="change"` is the default and previous behavior, where the input value updates immediately whenever the value changes. With `update_on="blur"`, the input value will update only when the text input loses focus or when the user presses Enter (or Cmd/Ctrl + Enter for `ui.input_text_area()`). (#1874)
+
 ### Bug fixes
 
 * `ui.Chat()` now correctly handles new `ollama.chat()` return value introduced in `ollama` v0.4. (#1787)

scripts/_pkg-sources.R

@@ -1,6 +1,6 @@
 list(
-  bslib = "rstudio/bslib@b54bfb5de82f76bc044c4c661995af3a63e7ab29",
-  shiny = "rstudio/shiny@c489fef4ff46fc37eb2a7c447a7108afde7ad124",
+  bslib = "rstudio/bslib@main",
+  shiny = "rstudio/shiny@main",
   sass = "sass",
   htmltools = "rstudio/htmltools@main"
 )

shiny/_versions.py

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

shiny/ui/_input_numeric.py

@@ -1,6 +1,6 @@
 __all__ = ("input_numeric",)
 
-from typing import Optional
+from typing import Literal, Optional
 
 from htmltools import Tag, TagChild, css, div, tags
 
@@ -19,6 +19,7 @@ def input_numeric(
     max: Optional[float] = None,
     step: Optional[float] = None,
     width: Optional[str] = None,
+    update_on: Literal["change", "blur"] = "change",
 ) -> Tag:
     """
     Create an input control for entry of numeric values.
@@ -39,6 +40,11 @@ def input_numeric(
         Interval to use when stepping between min and max.
     width
         The CSS width, e.g. '400px', or '100%'
+    update_on
+        When should the input value be updated? Options are `"change"` (default) and
+        `"blur"`. Use `"change"` to update the input immediately whenever the value
+        changes. Use `"blur"`to delay the input update until the input loses focus (the
+        user moves away from the input), or when Enter is pressed.
 
     Returns
     -------
@@ -67,6 +73,7 @@ def input_numeric(
             min=min,
             max=max,
             step=step,
+            data_update_on=update_on,
         ),
         class_="form-group shiny-input-container",
         style=css(width=width),

shiny/ui/_input_password.py

@@ -1,6 +1,6 @@
 __all__ = ("input_password",)
 
-from typing import Optional
+from typing import Literal, Optional
 
 from htmltools import Tag, TagChild, css, div, tags
 
@@ -17,6 +17,7 @@ def input_password(
     *,
     width: Optional[str] = None,
     placeholder: Optional[str] = None,
+    update_on: Literal["change", "blur"] = "change",
 ) -> Tag:
     """
     Create an password control for entry of passwords.
@@ -33,6 +34,11 @@ def input_password(
         The CSS width, e.g., '400px', or '100%'.
     placeholder
         The placeholder of the input.
+    update_on
+        When should the input value be updated? Options are `"change"` (default) and
+        `"blur"`. Use `"change"` to update the input immediately whenever the value
+        changes. Use `"blur"`to delay the input update until the input loses focus (the
+        user moves away from the input), or when Enter is pressed.
 
     Returns
     -------
@@ -58,6 +64,7 @@ def input_password(
             value=value,
             class_="shiny-input-password form-control",
             placeholder=placeholder,
+            data_update_on=update_on,
         ),
         class_="form-group shiny-input-container",
         style=css(width=width),

shiny/ui/_input_text.py

@@ -20,6 +20,7 @@ def input_text(
     placeholder: Optional[str] = None,
     autocomplete: Optional[str] = "off",
     spellcheck: Optional[Literal["true", "false"]] = None,
+    update_on: Literal["change", "blur"] = "change",
 ) -> Tag:
     """
     Create an input control for entry of text values.
@@ -45,6 +46,11 @@ def input_text(
     spellcheck
         Whether to enable browser spell checking of the text input (default is ``None``). If
         None, then it will use the browser's default behavior.
+    update_on
+        When should the input value be updated? Options are `"change"` (default) and
+        `"blur"`. Use `"change"` to update the input immediately whenever the value
+        changes. Use `"blur"`to delay the input update until the input loses focus (the
+        user moves away from the input), or when Enter is pressed.
 
     Returns
     -------
@@ -74,6 +80,7 @@ def input_text(
             placeholder=placeholder,
             autocomplete=autocomplete,
             spellcheck=spellcheck,
+            data_update_on=update_on,
         ),
         class_="form-group shiny-input-container",
         style=css(width=width),
@@ -95,6 +102,7 @@ def input_text_area(
     autoresize: bool = False,
     autocomplete: Optional[str] = None,
     spellcheck: Optional[Literal["true", "false"]] = None,
+    update_on: Literal["change", "blur"] = "change",
 ) -> Tag:
     """
     Create a textarea input control for entry of unstructured text values.
@@ -137,6 +145,11 @@ def input_text_area(
     spellcheck
         Whether to enable browser spell checking of the text input (default is ``None``). If
         None, then it will use the browser's default behavior.
+    update_on
+        When should the input value be updated? Options are `"change"` (default) and
+        `"blur"`. Use `"change"` to update the input immediately whenever the value
+        changes. Use `"blur"`to delay the input update until the input loses focus (the
+        user moves away from the input), or when Ctrl/Cmd + Enter is pressed.
 
     Returns
     -------
@@ -176,6 +189,7 @@ def input_text_area(
         cols=cols,
         autocomplete=autocomplete,
         spellcheck=spellcheck,
+        data_update_on=update_on,
     )
 
     return div(

shiny/www/shared/_version.json

@@ -1,5 +1,5 @@
 {
   "note!": "Generated by scripts/htmlDependencies.R: do not edit by hand",
   "package": "shiny",
-  "version": "1.9.1.9000 (rstudio/shiny@c489fef4ff46fc37eb2a7c447a7108afde7ad124)"
+  "version": "1.10.0.9000 (rstudio/shiny@531f31b66f0d83d07341b5e88e33386e4dc10f3e)"
 }

shiny/www/shared/bootstrap/_version.json

@@ -1,7 +1,7 @@
 {
   "note!": "Generated by scripts/htmlDependencies.R: do not edit by hand",
-  "shiny_version": "1.9.1.9000 (rstudio/shiny@c489fef4ff46fc37eb2a7c447a7108afde7ad124)",
-  "bslib_version": "0.8.0.9000 (rstudio/bslib@b54bfb5de82f76bc044c4c661995af3a63e7ab29)",
+  "shiny_version": "1.10.0.9000 (rstudio/shiny@531f31b66f0d83d07341b5e88e33386e4dc10f3e)",
+  "bslib_version": "0.9.0.9000 (rstudio/bslib@ee34398b1d93056c302560512a090c1326aff7cf)",
   "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.8.0.9000 (rstudio/bslib@b54bfb5de82f76bc044c4c661995af3a63e7ab29)"
+  "version": "0.9.0.9000 (rstudio/bslib@ee34398b1d93056c302560512a090c1326aff7cf)"
 }

shiny/www/shared/sass/bslib/bs3compat/_navbar_compat.scss

@@ -72,42 +72,58 @@ ul.nav.navbar-nav {
   }
 }
 
+:root {
+  --bslib-navbar-light-bg: var(--bslib-navbar-default-bg, var(--#{$prefix}light));
+  --bslib-navbar-dark-bg: var(--bslib-navbar-inverse-bg, var(--#{$prefix}black));
+}
+
+@mixin navbar-background-dark($important: false) {
+  background-color: var(--bslib-navbar-dark-bg) if($important, !important, null);
+}
+
+@mixin navbar-background-light($important: false) {
+  background-color: var(--bslib-navbar-light-bg) if($important, !important, null);
+}
 
 .navbar {
 
   // Defaults to null (and in that case, we don't want to define the CSS var)
   @if $navbar-light-bg {
-    --bslib-navbar-default-bg: #{$navbar-light-bg};
+    --bslib-navbar-light-bg: #{$navbar-light-bg};
   }
   @if $navbar-dark-bg {
-    --bslib-navbar-inverse-bg: #{$navbar-dark-bg};
-  }
-
-  // BS3 .navbar-default -> BS4 .navbar-light
-  &.navbar-default {
-    // Sets a variety of fg colors which are configurable via $navbar-light-* options
-    @extend .navbar-light;
-    background-color: var(--bslib-navbar-default-bg, var(--#{$prefix}light)) !important;
+    --bslib-navbar-dark-bg: #{$navbar-dark-bg};
   }
 
-  // BS3 .navbar-inverse -> BS4 .navbar-dark
-  &.navbar-inverse {
-    // Sets a variety of fg colors which are configurable via $navbar-dark-* options
-    @extend .navbar-dark;
-    background-color: var(--bslib-navbar-inverse-bg, var(--#{$prefix}dark)) !important;
-    // For BS5+ lean on emphasis-color
-    --bs-emphasis-color: white;
-    --bs-emphasis-color-rgb: 255, 255, 255;
+  @if $bootstrap-version < 5 {
+    // BS3 .navbar-default -> BS4 .navbar-light
+    &.navbar-default {
+      // Sets a variety of fg colors which are configurable via $navbar-light-* options
+      @extend .navbar-light;
+      @include navbar-background-light($important: true);
+    }
+
+    // BS3 .navbar-inverse -> BS4 .navbar-dark
+    &.navbar-inverse {
+      // Sets a variety of fg colors which are configurable via $navbar-dark-* options
+      @extend .navbar-dark;
+      @include navbar-background-dark($important: true);
+    }
   }
 }
 
-$enable-dark-mode: false !default;
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .navbar.navbar-default {
-      background-color: var(--bslib-navbar-default-bg, var(--#{$prefix}dark)) !important;
-    }
+@if $bootstrap-version >= 5 {
+  .navbar {
+    background-color: $navbar-bg;
   }
+
+  [data-bs-theme="dark"] :where(.navbar) { @include navbar-background-dark(); }
+  [data-bs-theme="light"] :where(.navbar), :where(.navbar) { @include navbar-background-light(); }
+
+  // These are defined *after* the above rules because we want the local version
+  // to win without having to resort to specificity tricks.
+  :where(.navbar)[data-bs-theme="dark"] { @include navbar-background-dark(); }
+  :where(.navbar)[data-bs-theme="light"] { @include navbar-background-light(); }
 }
 
 // Implement bs3 navbar toggler; used in Rmd websites, i.e.

shiny/www/shared/sass/bslib/builtin/bs5/shiny/_rules.scss

@@ -173,14 +173,15 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
     background-color: var(--bslib-dashboard-main-bg);
   }
 
+  .navbar {
+    // Add border-bottom for general navbars (primarily in non-bslib contexts)
+    border-bottom: $card-border-width solid $card-border-color;
+  }
+
   .bslib-page-navbar, .bslib-page-dashboard {
-    > .navbar {
-      @if not $navbar-light-bg and not $navbar-bg {
-        --bslib-navbar-default-bg: var(--#{$prefix}body-bg);
-      }
-      @if not $navbar-dark-bg and not $navbar-bg {
-        --bslib-navbar-inverse-bg: var(--#{$prefix}body-color);
-      }
+    // Inside bslib we only add the border on the top-level navbar
+    .navbar {
+      border-bottom: none;
     }
 
     > .navbar + div {
@@ -215,7 +216,7 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
   --#{$prefix}link-hover-color: rgba(var(--bs-body-color-rgb), 0.8);
   --#{$prefix}nav-link-font-size: 0.875rem;
 
-  .nav-link {
+  .nav-link:not(:empty) {
     padding-left: 5px !important;
     padding-right: 5px !important;
 

shiny/www/shared/sass/bslib/builtin/bs5/shiny/_variables.scss

@@ -148,6 +148,21 @@ $bslib-sidebar-fg: null !default;
   $bslib-sidebar-fg: color-contrast($bslib-sidebar-bg);
 }
 
+// From inst/lib/bs5/scss/_variables.scss
+// Repeated here so that we can set navbar light/dark to `--bs-body-bg`
+$navbar-bg:       null !default; // Background color for any navbarPage()
+$navbar-light-bg: $navbar-bg !default; // Background color for navbarPage(inverse = FALSE)
+$navbar-dark-bg:  $navbar-bg !default; // Background color for navbarPage(inverse = TRUE)
+
+@if $bslib-dashboard-design and $navbar-bg == null {
+  @if $navbar-light-bg == null {
+    $navbar-light-bg: var(--#{$prefix}body-bg);
+  }
+  @if $navbar-dark-bg == null {
+    $navbar-dark-bg: var(--#{$prefix}body-bg);
+  }
+}
+
 $border-color-translucent: if($bslib-dashboard-design, rgba(40, 70, 94, 0.1), null) !default;
 $border-color-translucent-dark: if($bslib-dashboard-design, rgba(255, 255, 255, 0.1), null) !default;