v1.8.0 release candidate (#3928)

Co-authored-by: cpsievert <cpsievert@users.noreply.github.com>

.eslintrc.yml

@@ -15,6 +15,11 @@ parser: '@typescript-eslint/parser'
 parserOptions:
   ecmaVersion: 2018
   sourceType: module
+  project:
+    - './tsconfig.json'
+ignorePatterns: # mirrors tsconfig.json's exclude
+    - '**/__tests__'
+    - '**/*.d.ts'
 plugins:
   - '@typescript-eslint'
   - prettier
@@ -70,6 +75,10 @@ rules:
 
   "@typescript-eslint/consistent-type-imports":
     - error
+
+  "@typescript-eslint/no-floating-promises":
+    - error
+
   "@typescript-eslint/naming-convention":
     - error
 

.yarnrc.yml

@@ -7,3 +7,4 @@ plugins:
     spec: "@yarnpkg/plugin-interactive-tools"
 
 yarnPath: .yarn/releases/yarn-3.2.3.cjs
+checksumBehavior: update

DESCRIPTION

@@ -1,7 +1,7 @@
 Package: shiny
 Type: Package
 Title: Web Application Framework for R
-Version: 1.7.5.9000
+Version: 1.8.0
 Authors@R: c(
     person("Winston", "Chang", role = c("aut", "cre"), email = "winston@posit.co", comment = c(ORCID = "0000-0002-1576-2126")),
     person("Joe", "Cheng", role = "aut", email = "joe@posit.co"),

NEWS.md

@@ -1,5 +1,33 @@
-# shiny (development version)
+# shiny 1.8.0
 
+## Breaking changes
+
+* Closed #3899: The JS function `Shiny.bindAll()` is now asynchronous. This change is driven by the recent push toward making dynamic UI rendering asynchronous, which is necessary for [shinylive](https://shinylive.io/r) (and should've happened when it was first introduced in Shiny v1.7.5). The vast majority of existing `Shiny.bindAll()` uses should continue to work as before, but some cases may break if downstream code relies on it being synchronous (i.e., blocking the main thread). In this case, consider placing any downstream code in a `.then()` callback (or `await` the result in a `async` function). (#3929)
+  * Since `renderContent()` calls `bindAll()` (after it inserts content), it now returns a `Promise<void>` instead of `void`, which can be useful if downstream code needs to wait for the binding to complete.
+
+## New features and improvements
+
+* Updated `selectizeInput()`'s selectize.js dependency from v0.12.4 to v0.15.2. In addition to many bug fixes and improvements, this update also adds several new [plugin options](https://selectize.dev/docs/demos/plugins). (#3875)
+
+* Shiny's CSS styling (for things like `showNotification()`, `withProgress()`, `inputPanel()`, etc.), has been updated with `{bslib}`'s upcoming CSS-only dark mode feature in mind. (#3882, #3914)
+
+* Default styles for `showNotification()` were tweaked slightly to improve accessibility, sizing, and padding. (#3913)
+
+* Shiny inputs and `{htmlwidgets}` are no longer treated as draggable inside of `absolutePanel()`/`fixedPanel()` with `draggable = TRUE`. As a result, interactions like zooming and panning now work as expected with widgets like `{plotly}` and `{leaflet}` when they appear in a draggable panel. (#3752, #3933) 
+
+* For `InputBinding`s, the `.receiveMessage()` method can now be asynchronous or synchronous (previously it could only be synchronous). (#3930)
+
+## Bug fixes
+
+* `fileInput()` no longer has unwanted round corners applied to the `buttonLabel`. (#3879)
+
+* Fixed #3898: `wrapFunctionLabel()` no longer throws an error if the `name` is longer than 10000 bytes. (#3903)
+
+# shiny 1.7.5.1
+
+## Bug fixes
+
+* On r-devel (R > 4.3.1), `isTruthy(NULL)` now returns `FALSE` (as it does with older versions of R). (#3906)
 
 # shiny 1.7.5
 

R/input-file.R

@@ -2,8 +2,13 @@
 #'
 #' Create a file upload control that can be used to upload one or more files.
 #'
-#' Whenever a file upload completes, the corresponding input variable is set
-#' to a dataframe. See the `Server value` section.
+#' Whenever a file upload completes, the corresponding input variable is set to
+#' a dataframe. See the `Server value` section.
+#'
+#' Each time files are uploaded, they are written to a new random subdirectory
+#' inside of R's process-level temporary directory. The Shiny user session keeps
+#' track of all uploads in the session, and when the session ends, Shiny deletes
+#' all of the subdirectories where files where uploaded to.
 #'
 #' @family input elements
 #'
@@ -11,21 +16,21 @@
 #' @param multiple Whether the user should be allowed to select and upload
 #'   multiple files at once. **Does not work on older browsers, including
 #'   Internet Explorer 9 and earlier.**
-#' @param accept A character vector of "unique file type specifiers" which
-#'   gives the browser a hint as to the type of file the server expects.
-#'   Many browsers use this prevent the user from selecting an invalid file.
+#' @param accept A character vector of "unique file type specifiers" which gives
+#'   the browser a hint as to the type of file the server expects. Many browsers
+#'   use this prevent the user from selecting an invalid file.
 #'
 #'   A unique file type specifier can be:
 #'   * A case insensitive extension like `.csv` or `.rds`.
 #'   * A valid MIME type, like `text/plain` or `application/pdf`
 #'   * One of `audio/*`, `video/*`, or `image/*` meaning any audio, video,
-#'     or image type, respectively.
+#'   or image type, respectively.
 #' @param buttonLabel The label used on the button. Can be text or an HTML tag
 #'   object.
 #' @param placeholder The text to show before a file has been uploaded.
 #' @param capture What source to use for capturing image, audio or video data.
-#'   This attribute facilitates user access to a device's media capture 
-#'   mechanism, such as a camera, or microphone, from within a file upload 
+#'   This attribute facilitates user access to a device's media capture
+#'   mechanism, such as a camera, or microphone, from within a file upload
 #'   control.
 #'
 #'   A value of `user` indicates that the user-facing camera and/or microphone
@@ -67,7 +72,9 @@
 #' }
 #'
 #' @section Server value:
-#' A `data.frame` that contains one row for each selected file, and following columns:
+#'
+#'   A `data.frame` that contains one row for each selected file, and following
+#'   columns:
 #' \describe{
 #'   \item{`name`}{The filename provided by the web browser. This is
 #'   **not** the path to read to get at the actual data that was uploaded

R/input-select.R

@@ -4,7 +4,7 @@
 #' from a list of values.
 #'
 #' By default, `selectInput()` and `selectizeInput()` use the JavaScript library
-#' \pkg{selectize.js} (<https://selectize.dev/) instead of
+#' \pkg{selectize.js} (<https://selectize.dev/>) instead of
 #' the basic select input element. To use the standard HTML select input
 #' element, use `selectInput()` with `selectize=FALSE`.
 #'
@@ -253,9 +253,8 @@ selectizeDependencyFunc <- function(theme) {
   # name, the JS/CSS would be loaded/included twice, which leads to
   # strange issues, especially since we now include a 3rd party
   # accessibility plugin https://github.com/rstudio/shiny/pull/3153
-  script <- file.path(
-    selectizeDir, c("js/selectize.min.js", "accessibility/js/selectize-plugin-a11y.min.js")
-  )
+  script <- file.path(selectizeDir, selectizeScripts())
+
   bslib::bs_dependency(
     input = sass::sass_file(stylesheet),
     theme = theme,
@@ -273,10 +272,18 @@ selectizeStaticDependency <- function(version) {
     src = "www/shared/selectize",
     package = "shiny",
     stylesheet = "css/selectize.bootstrap3.css",
-    script = c(
-      "js/selectize.min.js",
-      "accessibility/js/selectize-plugin-a11y.min.js"
-    )
+    script = selectizeScripts()
+  )
+}
+
+selectizeScripts <- function() {
+  isMinified <- isTRUE(get_devmode_option("shiny.minified", TRUE))
+  paste0(
+    c(
+      "js/selectize",
+      "accessibility/js/selectize-plugin-a11y"
+    ),
+    if (isMinified) ".min.js" else ".js"
   )
 }
 

R/jqueryui.R

@@ -76,16 +76,20 @@ absolutePanel <- function(...,
 
   style <- paste(paste(names(cssProps), cssProps, sep = ':', collapse = ';'), ';', sep='')
   divTag <- tags$div(style=style, ...)
-  if (isTRUE(draggable)) {
-    divTag <- tagAppendAttributes(divTag, class='draggable')
-    return(tagList(
-      divTag,
-      jqueryuiDependency(),
-      tags$script('$(".draggable").draggable();')
-    ))
-  } else {
+
+  if (identical(draggable, FALSE)) {
     return(divTag)
   }
+
+  # Add Shiny inputs and htmlwidgets to 'non-draggable' elements
+  # Cf. https://api.jqueryui.com/draggable/#option-cancel
+  dragOpts <- '{cancel: ".shiny-input-container,.html-widget,input,textarea,button,select,option"}'
+  dragJS <- sprintf('$(".draggable").draggable(%s);', dragOpts)
+  tagList(
+    tagAppendAttributes(divTag, class='draggable'),
+    jqueryuiDependency(),
+    tags$script(HTML(dragJS))
+  )
 }
 
 #' @rdname absolutePanel

R/shinyui.R

@@ -133,8 +133,11 @@ shinyDependencyCSS <- function(theme) {
     ))
   }
 
+  bs_version <- bslib::theme_version(theme)
+  bootstrap_scss <- paste0("shiny.bootstrap", bs_version, ".scss")
+
   scss_home <- system_file("www/shared/shiny_scss", package = "shiny")
-  scss_files <- file.path(scss_home, c("bootstrap.scss", "shiny.scss"))
+  scss_files <- file.path(scss_home, c(bootstrap_scss, "shiny.scss"))
   scss_files <- lapply(scss_files, sass::sass_file)
 
   bslib::bs_dependency(

R/utils.R

@@ -1240,14 +1240,12 @@ dotloop <- function(fun_, ...) {
 #' @param x An expression whose truthiness value we want to determine
 #' @export
 isTruthy <- function(x) {
-  if (inherits(x, 'try-error'))
-    return(FALSE)
-
-  if (!is.atomic(x))
-    return(TRUE)
-
   if (is.null(x))
     return(FALSE)
+  if (inherits(x, 'try-error'))
+    return(FALSE)
+  if (!is.atomic(x))
+    return(TRUE)
   if (length(x) == 0)
     return(FALSE)
   if (all(is.na(x)))
@@ -1431,6 +1429,12 @@ wrapFunctionLabel <- function(func, name, ..stacktraceon = FALSE, dots = TRUE) {
   if (name == "name" || name == "func" || name == "relabelWrapper") {
     stop("Invalid name for wrapFunctionLabel: ", name)
   }
+  if (nchar(name, "bytes") > 10000) {
+    # Max variable length in R is 10000 bytes. Truncate to a shorter number of
+    # chars because some characters could be multi-byte.
+    name <- substr(name, 1, 5000)
+  }
+
   assign(name, func, environment())
   registerDebugHook(name, environment(), name)
 

R/version_selectize.R

@@ -1,2 +1,2 @@
 # Generated by tools/updateSelectize.R; do not edit by hand
-version_selectize <- "0.12.4"
+version_selectize <- "0.15.2"

inst/www/shared/selectize/scss/plugins/auto_position.scss

@@ -0,0 +1,16 @@
+.#{selectize}-dropdown.plugin-auto_position.#{$selectize}-position-top {
+  border-top: 1px solid $select-color-border;
+  border-bottom: 0 none;
+  border-radius: 3px 3px 0 0;
+  box-shadow: 0 -6px 12px rgba(var(--bs-body-color-rgb, 0,0,0), .18);
+}
+
+.#{selectize}-control.plugin-auto_position .#{selectize}-input.#{$selectize}-position-top.dropdown-active {
+  border-radius: 0 0 3px 3px;
+  border-top: 0 none;
+
+  &::before {
+    top: 0;
+    bottom: unset;
+  }
+}

inst/www/shared/selectize/scss/plugins/clear_button.scss

@@ -0,0 +1,29 @@
+.#{$selectize}-control.plugin-clear_button {
+    .clear {
+        text-decoration: none;
+        display: flex;
+        position: absolute;
+        height: 100%;
+        width: 25px;
+        top: 0;
+        right: calc(#{$select-padding-x} - #{$select-padding-item-x});
+        color: var(--bs-body-color, black);
+        opacity: 0.4;
+        font-weight: bold;
+        border: none;
+        cursor: pointer;
+        z-index: 1;
+        font-size: 21px;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .clear:hover {
+        opacity: 1;
+    }
+
+    &.single .clear {
+        right: calc(#{$select-padding-x} - #{$select-padding-item-x} + 1.5rem);
+    }
+
+}

inst/www/shared/selectize/scss/plugins/drag_drop.scss

@@ -1,16 +1,19 @@
-.selectize-control.plugin-drag_drop {
-  &.multi > .selectize-input > div.ui-sortable-placeholder {
-	visibility: visible !important;
-	background: #f2f2f2 !important;
-	background: rgba(0,0,0,0.06) !important;
-	border: 0 none !important;
-	@include selectize-box-shadow(inset 0 0 12px 4px #fff);
+.#{$selectize}-control.plugin-drag_drop {
+  &.multi > .#{$selectize}-input.dragging {
+    overflow: visible;
+  }
+  &.multi > .#{$selectize}-input > div.ui-sortable-placeholder {
+    visibility: visible !important;
+    background: #f2f2f2 !important;
+    background: rgba(0, 0, 0, 0.06) !important;
+    border: 0 none !important;
+    box-shadow: inset 0 0 12px 4px #fff;
   }
   .ui-sortable-placeholder::after {
-	content: '!';
-	visibility: hidden;
+    content: "!";
+    visibility: hidden;
   }
   .ui-sortable-helper {
-	@include selectize-box-shadow(0 2px 5px rgba(0,0,0,0.2));
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   }
-}
+}

inst/www/shared/selectize/scss/plugins/dropdown_header.scss

@@ -1,20 +1,24 @@
-.selectize-dropdown-header {
-  position: relative;
-  padding: $selectize-padding-dropdown-item-y $selectize-padding-dropdown-item-x;
-  border-bottom: 1px solid $selectize-color-border;
-  background: mix($selectize-color-dropdown, $selectize-color-border, 85%);
-  @include selectize-border-radius($selectize-border-radius $selectize-border-radius 0 0);
+.#{$selectize}-dropdown.plugin-dropdown_header {
+  .#{$selectize}-dropdown-header {
+    position: relative;
+    padding: ($select-padding-dropdown-item-y * 2)
+      $select-padding-dropdown-item-x;
+    border-bottom: 1px solid $select-color-border;
+    background: RGBA($select-color-dropdown, 0.15);
+    border-radius: $select-border-radius $select-border-radius 0 0;
+  }
+  .#{$selectize}-dropdown-header-close {
+    position: absolute;
+    right: $select-padding-dropdown-item-x;
+    top: 50%;
+    color: $select-color-text;
+    opacity: 0.4;
+    margin-top: -12px;
+    line-height: 20px;
+    font-size: 20px !important;
+    text-decoration: none;
+  }
+  .#{$selectize}-dropdown-header-close:hover {
+    color: RGB($select-color-rgb);
+  }
 }
-.selectize-dropdown-header-close {
-  position: absolute;
-  right: $selectize-padding-dropdown-item-x;
-  top: 50%;
-  color: $selectize-color-text;
-  opacity: 0.4;
-  margin-top: -12px;
-  line-height: 20px;
-  font-size: 20px !important;
-}
-.selectize-dropdown-header-close:hover {
-  color: darken($selectize-color-text, 25%);
-}

inst/www/shared/selectize/scss/plugins/optgroup_columns.scss

@@ -1,17 +1,22 @@
-.selectize-dropdown.plugin-optgroup_columns {
+.#{$selectize}-dropdown.plugin-optgroup_columns {
+  .#{$selectize}-dropdown-content {
+    display: flex;
+  }
+
   .optgroup {
-	border-right: 1px solid #f2f2f2;
-	border-top: 0 none;
-	float: left;
-	@include selectize-box-sizing(border-box);
+    border-right: 1px solid #f2f2f2;
+    border-top: 0 none;
+    flex-grow: 1;
+    flex-basis: 0;
+    min-width: 0;
   }
   .optgroup:last-child {
-	border-right: 0 none;
+    border-right: 0 none;
   }
   .optgroup:before {
-	display: none;
+    display: none;
   }
   .optgroup-header {
-	border-top: 0 none;
+    border-top: 0 none;
   }
-}
+}

inst/www/shared/selectize/scss/plugins/remove_button.scss

@@ -1,43 +1,38 @@
-.selectize-control.plugin-remove_button {
-  [data-value] {
-	position: relative;
-	padding-right: 24px !important;
+.#{$selectize}-control.plugin-remove_button {
+  .item {
+    display: inline-flex;
+    align-items: center;
+    padding-right: 0 !important;
   }
-  [data-value] .remove {
-	z-index: 1; /* fixes ie bug (see #392) */
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	width: 17px;
-	text-align: center;
-	font-weight: bold;
-	font-size: 12px;
-	color: inherit;
-	text-decoration: none;
-	vertical-align: middle;
-	display: inline-block;
-	padding: $selectize-padding-item-y 0 0 0;
-	border-left: 1px solid $selectize-color-item-border;
-	@include selectize-border-radius(0 2px 2px 0);
-	@include selectize-box-sizing(border-box);
+
+  .item .remove {
+    color: inherit;
+    text-decoration: none;
+    vertical-align: middle;
+    display: inline-block;
+    padding: $select-padding-item-y $select-padding-item-x;
+    border-left: 1px solid $select-color-item-border;
+    border-radius: 0 2px 2px 0;
+    box-sizing: border-box;
+    margin-left: $select-padding-item-x;
   }
-  [data-value] .remove:hover {
-	background: rgba(0,0,0,0.05);
+
+  .item .remove:hover {
+    background: rgba(0, 0, 0, 0.05);
   }
-  [data-value].active .remove {
-	border-left-color: $selectize-color-item-active-border;
+
+  .item.active .remove {
+    border-left-color: $select-color-item-active-border;
   }
-  .disabled [data-value] .remove:hover {
-	background: none;
+
+  .disabled .item .remove:hover {
+    background: none;
   }
-  .disabled [data-value] .remove {
-	border-left-color: lighten(desaturate($selectize-color-item-border, 100%), $selectize-lighten-disabled-item-border);
-  }
-  .remove-single {
-	position: absolute;
-	right: 0;
-	top: 0;
-	font-size: 23px;
+
+  .disabled .item .remove {
+    border-left-color: lighten(
+      desaturate($select-color-item-border, 100%),
+      $select-lighten-disabled-item-border
+    );
   }
 }

inst/www/shared/selectize/scss/selectize.bootstrap3.scss

@@ -1,158 +1,136 @@
-/**
- * selectize.bootstrap3.css (v0.12.3) - Bootstrap 3 Theme
- * Copyright (c) 2013–2015 Brian Reavis & contributors
- *
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
- * file except in compliance with the License. You may obtain a copy of the License at:
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
- * ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- *
- * @author Brian Reavis <brian@thirdroute.com>
- */
 
-$selectize-font-family: inherit !default;
-$selectize-font-size: inherit !default;
-$selectize-line-height: $line-height-computed !default;
+$select-font-family: inherit;
+$select-font-size: inherit;
+$select-line-height: $line-height-computed;
 
-$selectize-color-text: $input-color !default;
-$selectize-color-highlight: rgba(255,237,40,0.4) !default;
-$selectize-color-input: $input-bg !default;
-$selectize-color-input-full: $input-bg !default;
-$selectize-color-input-error: $state-danger-text !default;
-$selectize-color-input-error-focus: darken($selectize-color-input-error, 10%) !default;
-$selectize-color-disabled: $input-bg !default;
-$selectize-color-item: mix($selectize-color-input, $selectize-color-text, 90%) !default;
-$selectize-color-item-border: rgba(black, 0) !default;
-$selectize-color-item-active: $component-active-bg !default;
-$selectize-color-item-active-text: color-contrast($selectize-color-item-active) !default;
-$selectize-color-item-active-border: rgba(black, 0) !default;
-$selectize-color-optgroup: $dropdown-bg !default;
-$selectize-color-optgroup-text: $dropdown-header-color !default;
-$selectize-color-optgroup-border: $dropdown-divider-bg !default;
-$selectize-color-dropdown: $dropdown-bg !default;
-$selectize-color-dropdown-text: $dropdown-link-color !default;
-$selectize-color-dropdown-border-top: mix($input-border, $input-bg, 0.8) !default;
-$selectize-color-dropdown-item-active: $dropdown-link-hover-bg !default;
-$selectize-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
-$selectize-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
-$selectize-opacity-disabled: 0.5 !default;
-$selectize-shadow-input: none !default;
-$selectize-shadow-input-focus: inset 0 1px 2px rgba(black, 0.15) !default;
-$selectize-shadow-input-error: inset 0 1px 1px rgba(black, .075) !default;
-$selectize-shadow-input-error-focus: inset 0 1px 1px rgba(black, .075), 0 0 6px lighten($selectize-color-input-error, 20%) !default;
-$selectize-border: 1px solid $input-border !default;
-$selectize-border-radius: $input-border-radius !default;
+$select-color-text: $text-color;
+$select-color-highlight: rgba(255, 237, 40, 0.4);
+$select-color-input: $input-bg;
+$select-color-input-full: $input-bg;
+$select-color-input-error: $state-danger-text;
+$select-color-input-error-focus: darken($select-color-input-error, 10%);
+$select-color-disabled: $input-bg;
+$select-color-item: RGBA($select-color-text, 0.1);
+$select-color-item-border: rgba(0, 0, 0, 0);
+$select-color-item-active: $component-active-bg;
+$select-color-item-active-text: color-contrast($select-color-item-active);
+$select-color-item-active-border: rgba(0, 0, 0, 0);
+$select-color-optgroup: $dropdown-bg;
+$select-color-optgroup-text: $dropdown-header-color;
+$select-color-optgroup-border: $dropdown-divider-bg;
+$select-color-dropdown: $dropdown-bg;
+$select-color-dropdown-border-top: mix($input-border, $input-bg, 80%);
+$select-color-dropdown-item-active: $dropdown-link-hover-bg;
+$select-color-dropdown-item-active-text: $dropdown-link-hover-color;
+$select-color-dropdown-item-create-active-text: $dropdown-link-hover-color;
+$select-opacity-disabled: 0.5;
+$select-shadow-input: none;
+$select-shadow-input-focus: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+$select-shadow-input-error: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+$select-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+  0 0 6px lighten($select-color-input-error, 20%);
+$select-border: 1px solid $input-border;
+$select-border-radius: $input-border-radius;
 
-$selectize-width-item-border: 0 !default;
-$selectize-padding-x: $padding-base-horizontal !default;
-$selectize-padding-y: $padding-base-vertical !default;
-$selectize-padding-dropdown-item-x: $padding-base-horizontal !default;
-$selectize-padding-dropdown-item-y: 3px !default;
-$selectize-padding-item-x: 3px !default;
-$selectize-padding-item-y: 1px !default;
-$selectize-margin-item-x: 3px !default;
-$selectize-margin-item-y: 3px !default;
-$selectize-caret-margin: 0 !default;
+$select-width-item-border: 0px;
+$select-padding-x: $padding-base-horizontal;
+$select-padding-y: $padding-base-vertical;
+$select-padding-dropdown-item-x: $padding-base-horizontal;
+$select-padding-dropdown-item-y: 3px;
+$select-padding-item-x: 5px;
+$select-padding-item-y: 1px;
+$select-margin-item-x: 3px;
+$select-margin-item-y: 3px;
 
-$selectize-arrow-size: 5px !default;
-$selectize-arrow-color: $selectize-color-text !default;
-$selectize-arrow-offset: $selectize-padding-x + 5px !default;
+$select-arrow-size: 5px;
+$select-arrow-color: $select-color-text;
+$select-arrow-offset: $select-padding-x + 5px;
 
 @import "selectize";
 
-//Import Plugins
-@import "plugins/drag_drop";
-@import "plugins/dropdown_header";
-@import "plugins/optgroup_columns";
-@import "plugins/remove_button";
-
-.selectize-dropdown, .selectize-dropdown.form-control {
-    height: auto;
-    padding: 0;
-    margin: 2px 0 0 0;
-    z-index: $zindex-dropdown;
-    background: $selectize-color-dropdown;
-    color: $selectize-color-dropdown-text;
-    border: 1px solid $dropdown-fallback-border;
-    border: 1px solid $dropdown-border;
-    @include selectize-border-radius ($border-radius-base);
-    @include selectize-box-shadow (0 6px 12px rgba(black, .175));
+.#{$selectize}-dropdown,
+.#{$selectize}-dropdown.form-control {
+  height: auto;
+  padding: 0;
+  margin: 2px 0 0 0;
+  z-index: $zindex-dropdown;
+  background: $select-color-dropdown;
+  border: 1px solid $dropdown-fallback-border;
+  border: 1px solid $dropdown-border;
+  border-radius: $border-radius-base;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 }
 
-.selectize-dropdown {
-    .optgroup-header {
-        font-size: $font-size-small;
-        line-height: $line-height-base;
-    }
-    .optgroup:first-child:before {
-        display: none;
-    }
-    .optgroup:before {
-        content: ' ';
-        display: block;
-        @include nav-divider;
-        margin-left: $selectize-padding-dropdown-item-x * -1;
-        margin-right: $selectize-padding-dropdown-item-x * -1;
-    }
+.#{$selectize}-dropdown {
+  .optgroup-header {
+    font-size: $font-size-small;
+    line-height: $line-height-base;
+  }
+  .optgroup:first-child:before {
+    display: none;
+  }
+  .optgroup:before {
+    content: " ";
+    display: block;
+    @include nav-divider();
+    margin-left: $select-padding-dropdown-item-x * -1;
+    margin-right: $select-padding-dropdown-item-x * -1;
+  }
 }
 
-.selectize-dropdown-content {
-    padding: 5px 0;
+.#{$selectize}-dropdown-content {
+  padding: 5px 0;
 }
 
-.selectize-dropdown-header {
-    padding: $selectize-padding-dropdown-item-y * 2 $selectize-padding-dropdown-item-x;
+.#{$selectize}-dropdown-emptyoptionlabel {
+	text-align: center;
 }
 
-.selectize-input {
-    min-height: $input-height-base;
+.#{$selectize}-input {
+  min-height: $input-height-base;
 
-    &.dropdown-active {
-        @include selectize-border-radius ($selectize-border-radius);
+  &.dropdown-active {
+    border-radius: $select-border-radius;
+  }
+  &.dropdown-active::before {
+    display: none;
+  }
+  &.focus {
+    $color: $input-border-focus;
+    $color-rgba: rgba(red($color), green($color), blue($color), 0.6);
+    border-color: $color;
+    outline: 0;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $color-rgba;
+  }
+}
+
+.has-error .#{$selectize}-input {
+  border-color: $select-color-input-error;
+  box-shadow: $select-shadow-input-error;
+
+  &:focus {
+    border-color: $select-color-input-error-focus;
+    box-shadow: $select-shadow-input-error-focus;
+  }
+}
+
+.#{$selectize}-control {
+  &.multi {
+    .#{$selectize}-input.has-items {
+      padding-left: $select-padding-x - $select-padding-item-x;
+      padding-right: $select-padding-x - $select-padding-item-x;
     }
-    &.dropdown-active::before {
-        display: none;
-    }
-    &.focus {
-        $color: $input-border-focus;
-        $color-rgba: rgba(red($color), green($color), blue($color), .6);
-        border-color: $color;
-        outline: 0;
-        @include selectize-box-shadow ("inset 0 1px 1px rgba(black, .075), 0 0 8px #{$color-rgba}");
+    .#{$selectize}-input > div {
+      border-radius: $select-border-radius - 1px;
     }
+  }
 }
 
-.has-error .selectize-input {
-    border-color: $selectize-color-input-error;
-    @include selectize-box-shadow ($selectize-shadow-input-error);
-
-    &:focus {
-        border-color: $selectize-color-input-error-focus;
-        @include selectize-box-shadow ($selectize-shadow-input-error-focus);
-    }
-}
-
-.selectize-control {
-    &.multi {
-        .selectize-input.has-items {
-            padding-left: $selectize-padding-x - $selectize-padding-item-x;
-            padding-right: $selectize-padding-x - $selectize-padding-item-x;
-        }
-        .selectize-input > div {
-            @include selectize-border-radius ($selectize-border-radius - 1px);
-        }
-    }
-}
-
-.form-control.selectize-control {
-    padding: 0;
-    height: auto;
-    border: none;
-    background: none;
-    @include selectize-box-shadow (none);
-    @include selectize-border-radius (0);
+.form-control.#{$selectize}-control {
+  padding: 0;
+  height: auto;
+  border: none;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
 }

inst/www/shared/selectize/scss/selectize.bootstrap4.scss

@@ -1,118 +1,112 @@
-/**
- * Selectize bootstrap 4
- */
-
-//Import Boostrap 4 functions and variables
 
 $enable-shadows: true !default;
-$selectize-font-family: inherit !default;
-$selectize-font-size: inherit !default;
-$selectize-line-height: $input-btn-line-height !default; //formerly line-height-computed
+$select-font-family: inherit !default;
+$select-font-size: inherit !default;
+$select-line-height: $input-btn-line-height !default; //formerly line-height-computed
 
-$selectize-color-text: $input-color !default;
-$selectize-color-highlight: rgba(255,237,40,0.4) !default;
-$selectize-color-input: $input-bg !default;
-$selectize-color-input-full: $input-bg !default;
-$selectize-color-input-error: $danger !default;
-$selectize-color-input-error-focus: darken($selectize-color-input-error, 10%) !default;
-$selectize-color-disabled: $input-bg !default;
-$selectize-color-item: mix($selectize-color-input, $selectize-color-text, 90%) !default;
-$selectize-color-item-border: $input-border-color !default;
-$selectize-color-item-active: $component-active-bg !default;
-$selectize-color-item-active-text: color-contrast($selectize-color-item-active) !default;
-$selectize-color-item-active-border: rgba(0,0,0,0) !default;
-$selectize-color-optgroup: $dropdown-bg !default;
-$selectize-color-optgroup-text: $dropdown-header-color !default;
-$selectize-color-optgroup-border: $dropdown-divider-bg !default;
-$selectize-color-dropdown: $dropdown-bg !default;
-$selectize-color-dropdown-text: $dropdown-link-color !default;
-$selectize-color-dropdown-border-top: mix($input-border-color, $input-bg, 0.8) !default;
-$selectize-color-dropdown-item-active: $dropdown-link-hover-bg !default;
-$selectize-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
-$selectize-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
-$selectize-opacity-disabled: 0.5 !default;
-$selectize-shadow-input: none !default;
-$selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15) !default;
-$selectize-shadow-input-error: inset 0 1px 1px rgba(0, 0, 0, .075) !default;
-$selectize-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten($selectize-color-input-error, 20%) !default;
-$selectize-border: 1px solid $input-border-color !default;
-$selectize-border-radius: $input-border-radius !default;
+$select-color-text: gray("800") !default; //$gray-800
+$select-color-highlight: rgba(255, 237, 40, 0.4) !default;
+$select-color-input: $input-bg !default;
+$select-color-input-full: $input-bg !default;
+$select-color-input-error: theme-color("danger") !default;
+$select-color-input-error-focus: darken(
+  $select-color-input-error,
+  10%
+) !default;
+$select-color-disabled: $input-bg !default;
+$select-color-item: RGBA($select-color-text, 0.1) !default;
+$select-color-item-border: $border-color !default;
+$select-color-item-active: $component-active-bg !default;
+$select-color-item-active-text: color-contrast($select-color-item-active) !default;
+$select-color-item-active-border: rgba(0, 0, 0, 0) !default;
+$select-color-optgroup: $dropdown-bg !default;
+$select-color-optgroup-text: $dropdown-header-color !default;
+$select-color-optgroup-border: $dropdown-divider-bg !default;
+$select-color-dropdown: $dropdown-bg !default;
+$select-color-dropdown-border-top: mix(
+  $input-border-color,
+  $input-bg,
+  80%
+) !default;
+$select-color-dropdown-item-active: $dropdown-link-hover-bg !default;
+$select-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
+$select-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
+$select-opacity-disabled: 0.5 !default;
+$select-shadow-input: none !default;
+$select-shadow-input-focus: inset 0 1px 2px rgba(0, 0, 0, 0.15) !default;
+$select-shadow-input-error: inset 0 1px 1px rgba(0, 0, 0, 0.075) !default;
+$select-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+  0 0 6px lighten($select-color-input-error, 20%) !default;
+$select-border: 1px solid $input-border-color !default;
+$select-border-radius: $input-border-radius !default;
 
-$selectize-width-item-border: 0px !default;
-$selectize-padding-x: $input-btn-padding-x !default;
-$selectize-padding-y: $input-btn-padding-y !default;
-$selectize-padding-dropdown-item-x: $input-btn-padding-x !default;
-$selectize-padding-dropdown-item-y: 3px !default;
-$selectize-padding-item-x: 3px !default;
-$selectize-padding-item-y: 1px !default;
-$selectize-margin-item-x: 3px !default;
-$selectize-margin-item-y: 3px !default;
-$selectize-caret-margin: 0 !default;
-
-$selectize-arrow-size: 5px !default;
-$selectize-arrow-color: $selectize-color-text !default;
-$selectize-arrow-offset: calc(#{$selectize-padding-x} + 5px) !default;
+$select-width-item-border: 0px !default;
+$select-padding-x: $input-btn-padding-x !default;
+$select-padding-y: $input-btn-padding-y !default;
+$select-padding-dropdown-item-x: $input-btn-padding-x !default;
+$select-padding-dropdown-item-y: 3px !default;
+$select-padding-item-x: 5px !default;
+$select-padding-item-y: 1px !default;
+$select-margin-item-x: 3px !default;
+$select-margin-item-y: 3px !default;
 
+$select-arrow-size: 5px !default;
+$select-arrow-color: $select-color-text !default;
+$select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 
 @import "selectize";
 
-//Import Plugins
-@import "plugins/drag_drop";
-@import "plugins/dropdown_header";
-@import "plugins/optgroup_columns";
-@import "plugins/remove_button";
-
-.selectize-dropdown, .selectize-dropdown.form-control {
+.#{$selectize}-dropdown,
+.#{$selectize}-dropdown.form-control {
   height: auto;
   padding: 0;
   margin: 2px 0 0 0;
   z-index: $zindex-dropdown;
-  background: $selectize-color-dropdown;
-  color: $selectize-color-dropdown-text;
+  background: $select-color-dropdown;
   border: 1px solid $dropdown-border-color; //$dropdown-fallback-border
-  @include selectize-border-radius($border-radius);
-  @include selectize-box-shadow(0 6px 12px rgba(0,0,0,.175));
+  border-radius: $border-radius;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 }
 
-.selectize-dropdown {
+.#{$selectize}-dropdown {
   .optgroup-header {
-	font-size: $font-size-sm;
-	line-height: $line-height-base;
+    font-size: $font-size-sm;
+    line-height: $line-height-base;
   }
   .optgroup:first-child:before {
-	display: none;
+    display: none;
   }
   .optgroup:before {
-	content: ' ';
-	display: block;
-	height: 0;
-	margin: $dropdown-divider-margin-y 0;
-	overflow: hidden;
-	border-top: 1px solid $dropdown-divider-bg;
-	margin-left: $selectize-padding-dropdown-item-x * -1;
-	margin-right: $selectize-padding-dropdown-item-x * -1;
+    content: " ";
+    display: block;
+    height: 0;
+    margin: $dropdown-divider-margin-y 0;
+    overflow: hidden;
+    border-top: 1px solid $dropdown-divider-bg;
+    margin-left: $select-padding-dropdown-item-x * -1;
+    margin-right: $select-padding-dropdown-item-x * -1;
   }
 
   .create {
-	padding-left: $selectize-padding-dropdown-item-x;
+    padding-left: $select-padding-dropdown-item-x;
   }
 }
 
-.selectize-dropdown-content {
+.#{$selectize}-dropdown-content {
   padding: 5px 0;
 }
 
-.selectize-dropdown-header {
-  padding: $selectize-padding-dropdown-item-y * 2 $selectize-padding-dropdown-item-x;
+.#{$selectize}-dropdown-emptyoptionlabel {
+	text-align: center;
 }
 
-.selectize-input {
+.#{$selectize}-input {
   min-height: $input-height;
   @include box-shadow($input-box-shadow);
   @include transition($input-transition);
 
   &.dropdown-active {
-    @include selectize-border-radius($selectize-border-radius);
+    border-radius: $select-border-radius;
   }
   &.dropdown-active::before {
     display: none;
@@ -128,22 +122,21 @@ $selectize-arrow-offset: calc(#{$selectize-padding-x} + 5px) !default;
   }
 }
 
-.is-invalid .selectize-input {
-  border-color: $selectize-color-input-error;
-  @include selectize-box-shadow($selectize-shadow-input-error);
+.is-invalid .#{$selectize}-input {
+  border-color: $select-color-input-error;
+  box-shadow: $select-shadow-input-error;
 
   &:focus {
-	border-color: $selectize-color-input-error-focus;
-	// @include selectize-box-shadow(none)
-	@include selectize-box-shadow($selectize-shadow-input-error-focus);
+    border-color: $select-color-input-error-focus;
+    box-shadow: $select-shadow-input-error-focus;
   }
 }
 
-.selectize-control {
-  &.form-control-sm{
-    .selectize-input.has-items{
+.#{$selectize}-control {
+  &.form-control-sm {
+    .#{$selectize}-input.has-items {
       min-height: $input-height-sm !important;
-      height: $input-height-sm !important;
+      height: $input-height-sm;
       padding: $input-padding-y-sm $input-padding-x-sm !important;
       font-size: $input-font-size-sm;
       line-height: $input-line-height-sm;
@@ -151,26 +144,53 @@ $selectize-arrow-offset: calc(#{$selectize-padding-x} + 5px) !default;
   }
 
   &.multi {
-	.selectize-input.has-items {
-	  padding-left: calc(#{$selectize-padding-x} - #{$selectize-padding-item-x});
-	  padding-right: calc(#{$selectize-padding-x} - #{$selectize-padding-item-x});
-	}
-	.selectize-input > div {
-	  @include selectize-border-radius(calc(#{$selectize-border-radius} - 1px));
-	}
+    .#{$selectize}-input.has-items {
+      height: auto;
+      padding-left: calc(#{$select-padding-x} - #{$select-padding-item-x});
+      padding-right: calc(#{$select-padding-x} - #{$select-padding-item-x});
+    }
+    .#{$selectize}-input > div {
+      border-radius: calc(#{$select-border-radius} - 1px);
+    }
   }
 }
 
-.form-control.selectize-control {
+.form-control.#{$selectize}-control {
   padding: 0;
   height: auto;
   border: none;
   background: none;
-  @include selectize-box-shadow(none);
-  @include selectize-border-radius(0);
+  box-shadow: none;
+  border-radius: 0;
 }
 
-.input-group .selectize-input {
-	overflow: unset;
-	@include selectize-border-radius(0 $selectize-border-radius $selectize-border-radius 0);
+.input-group .#{$selectize}-control:not(:last-child) {
+  .#{$selectize}-input{
+    overflow: unset;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.input-group .#{$selectize}-control:not(:first-child) {
+  .#{$selectize}-input{
+    overflow: unset;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+// .input-group .#{$selectize}-input {
+//   overflow: unset;
+//   border-radius: 0 $select-border-radius $select-border-radius 0;
+// }
+
+.#{selectize}-dropdown.plugin-auto_position.#{$selectize}-position-top {
+  border-top: $select-border!important;
+  border-bottom: $select-border!important;
+  border-radius: $select-border-radius!important;
+}
+.#{selectize}-control.plugin-auto_position .#{selectize}-input.#{$selectize}-position-top.dropdown-active {
+  border-radius: $select-border-radius!important;
+  border-top: $select-border!important;
 }

inst/www/shared/selectize/scss/selectize.bootstrap5.scss

@@ -1,3 +1,200 @@
-$input-line-height-sm: $form-select-line-height !default;
-@import 'selectize.bootstrap4';
-.selectize-control{padding:0;}
+
+$enable-shadows: true !default;
+$select-font-family: if($input-btn-font-family, $input-btn-font-family, inherit) !default;
+$select-font-size: $input-btn-font-size !default;
+$select-line-height: $input-btn-line-height !default; //formerly line-height-computed
+
+$select-color-rgb: var(--bs-emphasis-color-rgb, 0, 0, 0) !default;
+$select-color-text: RGBA($select-color-rgb, 0.83) !default;
+$select-color-highlight: rgba(255, 237, 40, 0.4) !default;
+$select-color-input: $input-bg !default;
+$select-color-input-full: $input-bg !default;
+$select-color-input-error: $danger !default;
+$select-color-input-error-focus: darken(
+  $select-color-input-error,
+  10%
+) !default;
+$select-color-disabled: $input-bg !default;
+$select-color-item: RGBA($select-color-rgb, 0.05) !default;
+$select-color-item-border: $border-color !default;
+$select-color-item-active: $component-active-bg !default;
+$select-color-item-active-text: color-contrast($select-color-item-active) !default;
+$select-color-item-active-border: rgba(0, 0, 0, 0) !default;
+$select-color-optgroup: $dropdown-bg !default;
+$select-color-optgroup-text: $dropdown-header-color !default;
+$select-color-optgroup-border: $dropdown-divider-bg !default;
+$select-color-dropdown: $dropdown-bg !default;
+$select-color-dropdown-border-top: rgba($input-border-color, 0.8) !default;
+$select-color-dropdown-item-active: $dropdown-link-hover-bg !default;
+$select-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
+$select-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
+$select-opacity-disabled: 0.5 !default;
+$select-shadow-input: none !default;
+$select-shadow-input-focus: inset 0 1px 2px rgba(0, 0, 0, 0.15) !default;
+$select-shadow-input-error: inset 0 1px 1px rgba(0, 0, 0, 0.075) !default;
+$select-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+  0 0 6px lighten($select-color-input-error, 20%) !default;
+$select-border: 1px solid $input-border-color !default;
+$select-border-radius: $input-border-radius !default;
+
+$select-width-item-border: 0px !default;
+$select-padding-x: $input-btn-padding-x !default;
+$select-padding-y: $input-btn-padding-y !default;
+$select-padding-dropdown-item-x: $input-btn-padding-x !default;
+$select-padding-dropdown-item-y: 3px !default;
+$select-padding-item-x: 5px !default;
+$select-padding-item-y: 1px !default;
+$select-margin-item-x: 3px !default;
+$select-margin-item-y: 3px !default;
+
+$select-arrow-size: 5px !default;
+$select-arrow-color: $select-color-text !default;
+$select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
+
+@import "selectize";
+
+.#{$selectize}-dropdown,
+.#{$selectize}-dropdown.form-control {
+  height: auto;
+  padding: 0;
+  margin: 2px 0 0 0;
+  z-index: $zindex-dropdown;
+  background: $select-color-dropdown;
+  border: 1px solid $dropdown-border-color; //$dropdown-fallback-border
+  border-radius: $border-radius;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+}
+
+.#{$selectize}-dropdown {
+  .optgroup-header {
+    font-size: $font-size-sm;
+    line-height: $line-height-base;
+  }
+  .optgroup:first-child:before {
+    display: none;
+  }
+  .optgroup:before {
+    content: " ";
+    display: block;
+    height: 0;
+    margin: $dropdown-divider-margin-y 0;
+    overflow: hidden;
+    border-top: 1px solid $dropdown-divider-bg;
+    margin-left: $select-padding-dropdown-item-x * -1;
+    margin-right: $select-padding-dropdown-item-x * -1;
+  }
+
+  .create {
+    padding-left: $select-padding-dropdown-item-x;
+  }
+}
+
+.#{$selectize}-dropdown-content {
+  padding: 5px 0;
+}
+
+.#{$selectize}-dropdown-emptyoptionlabel {
+	text-align: center;
+}
+
+.#{$selectize}-input {
+  min-height: $input-height;
+  @include box-shadow($input-box-shadow);
+  @include transition($input-transition);
+
+  &.dropdown-active {
+    border-radius: $select-border-radius;
+  }
+  &.dropdown-active::before {
+    display: none;
+  }
+  &.focus {
+    border-color: $input-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      box-shadow: $input-box-shadow, $input-focus-box-shadow;
+    } @else {
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+}
+
+.is-invalid .#{$selectize}-input {
+  border-color: $select-color-input-error;
+  box-shadow: $select-shadow-input-error;
+
+  &:focus {
+    border-color: $select-color-input-error-focus;
+    box-shadow: $select-shadow-input-error-focus;
+  }
+}
+
+.#{$selectize}-control {
+  &.form-control-sm {
+    .#{$selectize}-input {
+      min-height: $input-height-sm !important;
+      height: $input-height-sm;
+      padding: $input-padding-y-sm $input-padding-x-sm !important;
+      font-size: $input-font-size-sm;
+      line-height: $line-height-sm;
+    }
+  }
+
+  &.multi {
+    .#{$selectize}-input {
+      height: auto;
+      padding-left: calc(#{$select-padding-x} - #{$select-padding-item-x});
+      padding-right: calc(#{$select-padding-x} - #{$select-padding-item-x});
+    }
+    .#{$selectize}-input > div {
+      border-radius: calc(#{$select-border-radius} - 1px);
+    }
+  }
+}
+
+.form-select.#{$selectize}-control,
+.form-control.#{$selectize}-control {
+  padding: 0;
+  height: auto;
+  border: none;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+.input-group>.input-group-append>.btn, .input-group>.form-control:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.input-group>.input-group-prepend>.btn {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+
+.input-group .#{$selectize}-control:not(:last-child) {
+  .#{$selectize}-input{
+    overflow: unset;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.input-group .#{$selectize}-control:not(:first-child) {
+  .#{$selectize}-input{
+    overflow: unset;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.#{selectize}-dropdown.plugin-auto_position.#{$selectize}-position-top {
+  border-top: $select-border!important;
+  border-bottom: $select-border!important;
+  border-radius: $select-border-radius!important;
+}
+.#{selectize}-control.plugin-auto_position .#{selectize}-input.#{$selectize}-position-top.dropdown-active {
+  border-radius: $select-border-radius!important;
+  border-top: $select-border!important;
+}

inst/www/shared/selectize/scss/selectize.default.scss

@@ -1,84 +1,71 @@
-/**
- * selectize.default.css (v$$version) - Default Theme
- * Copyright (c) 2013–2015 Brian Reavis & contributors
- *
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
- * file except in compliance with the License. You may obtain a copy of the License at:
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
- * ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- *
- * $author Brian Reavis <brian$thirdroute.com>
- */
+$select-color-item: #1da7ee;
+$select-color-item-text: #fff;
+$select-color-item-active-text: #fff;
+$select-color-item-border: #0073bb;
+$select-color-item-active: #92c836;
+$select-color-item-active-border: #00578d;
+$select-width-item-border: 1px;
 
-@import "selectize";
+@import "selectize.scss";
 
-$selectize-color-item: #1da7ee;
-$selectize-color-item-text: #fff;
-$selectize-color-item-active-text: #fff;
-$selectize-color-item-border: #0073bb;
-$selectize-color-item-active: #92c836;
-$selectize-color-item-active-border: #00578d;
-$selectize-width-item-border: 1px;
-$selectize-caret-margin: 0 1px;
-
-.selectize-control {
+.#{$selectize}-control {
   &.multi {
-	.selectize-input {
-	  &.has-items {
-		$padding-x: $selectize-padding-x - 3px;
-		padding-left: $padding-x;
-		padding-right: $padding-x;
-	  }
-	  &.disabled [data-value] {
-		color: #999;
-		text-shadow: none;
-		background: none;
-		@include selectize-box-shadow(none);
+    .#{$selectize}-input {
+      &.has-items {
+        $padding-x: $select-padding-x - 3px;
+        padding-left: $padding-x;
+        padding-right: $padding-x;
+      }
+      &.disabled [data-value] {
+        color: #999;
+        text-shadow: none;
+        background: none;
+        box-shadow: none;
 
-		&, .remove {
-		  border-color: #e6e6e6;
-		}
-		.remove {
-		  background: none;
-		}
-	  }
-	  [data-value] {
-		text-shadow: 0 1px 0 rgba(0,51,83,0.3);
-		@include selectize-border-radius(3px);
-		@include selectize-vertical-gradient(#1da7ee, #178ee9);
-		@include selectize-box-shadow(#{"0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03)"});
-		&.active {
-		  @include selectize-vertical-gradient(#008fd8, #0075cf);
-		}
-	  }
-	}
+        &,
+        .remove {
+          border-color: #e6e6e6;
+        }
+        .remove {
+          background: none;
+        }
+      }
+      [data-value] {
+        text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
+        border-radius: 3px;
+        @include selectize-vertical-gradient(#1da7ee, #178ee9);
+        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2),
+          inset 0 1px rgba(255, 255, 255, 0.03);
+        &.active {
+          @include selectize-vertical-gradient(#008fd8, #0075cf);
+        }
+      }
+    }
   }
   &.single {
-	.selectize-input {
-	  @include selectize-box-shadow(#{"0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8)"});
-	  @include selectize-vertical-gradient(#fefefe, #f2f2f2);
-	}
+    .#{$selectize}-input {
+      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05),
+        inset 0 1px 0 rgba(255, 255, 255, 0.8);
+      @include selectize-vertical-gradient(#fefefe, #f2f2f2);
+    }
   }
 }
 
-.selectize-control.single .selectize-input, .selectize-dropdown.single {
+.#{$selectize}-control.single .#{$selectize}-input,
+.#{$selectize}-dropdown.single {
   border-color: #b8b8b8;
 }
 
-.selectize-dropdown {
+.#{$selectize}-dropdown {
   .optgroup-header {
-	padding-top: $selectize-padding-dropdown-item-y + 2px;
-	font-weight: bold;
-	font-size: 0.85em;
+    padding-top: $select-padding-dropdown-item-y + 2px;
+    font-weight: bold;
+    font-size: 0.85em;
   }
   .optgroup {
-	border-top: 1px solid $selectize-color-dropdown-border-top;
-	&:first-child {
-	  border-top: 0 none;
-	}
+    border-top: 1px solid $select-color-dropdown-border-top;
+    &:first-child {
+      border-top: 0 none;
+    }
   }
-}
+}

inst/www/shared/selectize/scss/selectize.scss

@@ -1,300 +1,364 @@
+@use "sass:math";
+
 // base styles
+$selectize: "selectize" !default;
+$select-font-family: inherit !default;
+$select-font-smoothing: inherit !default;
+$select-font-size: 13px !default;
+$select-line-height: 18px !default;
 
-$selectize-font-family: inherit !default;
-$selectize-font-smoothing: inherit !default;
-$selectize-font-size: 13px !default;
-$selectize-line-height: 18px !default;
+$select-color-rgb: 0,0,0 !default;
+$select-color-text: RGBA($select-color-rgb, 0.83) !default;
+$select-color-border: #d0d0d0 !default;
+$select-color-highlight: rgba(125, 168, 208, 0.2) !default;
+$select-color-input: #fff !default;
+$select-color-input-full: $select-color-input !default;
+$select-color-disabled: #fafafa !default;
+$select-color-item: #f2f2f2 !default;
+$select-color-item-text: $select-color-text !default;
+$select-color-item-border: #d0d0d0 !default;
+$select-color-item-active: #e8e8e8 !default;
+$select-color-item-active-text: $select-color-text !default;
+$select-color-item-active-border: #cacaca !default;
+$select-color-dropdown: #fff !default;
+$select-color-dropdown-border: $select-color-border !default;
+$select-color-dropdown-border-top: #f0f0f0 !default;
+$select-color-dropdown-item-active: #f5fafd !default;
+$select-color-dropdown-item-active-text: #495c68 !default;
+$select-color-dropdown-item-create-text: RGBA($select-color-rgb, 0.5) !default;
+$select-color-dropdown-item-create-active-text: $select-color-dropdown-item-active-text !default;
+$select-color-optgroup: $select-color-dropdown !default;
+$select-color-optgroup-text: $select-color-text !default;
+$select-lighten-disabled-item: 30% !default;
+$select-lighten-disabled-item-text: 30% !default;
+$select-lighten-disabled-item-border: 30% !default;
+$select-opacity-disabled: 0.5 !default;
 
-$selectize-color-text: #303030 !default;
-$selectize-color-border: #d0d0d0 !default;
-$selectize-color-highlight: rgba(125,168,208,0.2) !default;
-$selectize-color-input: #fff !default;
-$selectize-color-input-full: $selectize-color-input !default;
-$selectize-color-disabled: #fafafa !default;
-$selectize-color-item: #f2f2f2 !default;
-$selectize-color-item-text: $selectize-color-text !default;
-$selectize-color-item-border: #d0d0d0 !default;
-$selectize-color-item-active: #e8e8e8 !default;
-$selectize-color-item-active-text: $selectize-color-text !default;
-$selectize-color-item-active-border: #cacaca !default;
-$selectize-color-dropdown: #fff !default;
-$selectize-color-dropdown-border: $selectize-color-border !default;
-$selectize-color-dropdown-border-top: #f0f0f0 !default;
-$selectize-color-dropdown-item-active: #f5fafd !default;
-$selectize-color-dropdown-item-active-text: #495c68 !default;
-$selectize-color-dropdown-item-create-text: rgba(red($selectize-color-text), green($selectize-color-text), blue($selectize-color-text), 0.5) !default;
-$selectize-color-dropdown-item-create-active-text: $selectize-color-dropdown-item-active-text !default;
-$selectize-color-optgroup: $selectize-color-dropdown !default;
-$selectize-color-optgroup-text: $selectize-color-text !default;
-$selectize-lighten-disabled-item: 30% !default;
-$selectize-lighten-disabled-item-text: 30% !default;
-$selectize-lighten-disabled-item-border: 30% !default;
-$selectize-opacity-disabled: 0.5 !default;
+$select-shadow-input: inset 0 1px 1px rgba(0, 0, 0, 0.1) !default;
+$select-shadow-input-focus: inset 0 1px 2px rgba(0, 0, 0, 0.15) !default;
+$select-border: 1px solid $select-color-border !default;
+$select-dropdown-border: 1px solid $select-color-dropdown-border !default;
+$select-border-radius: 3px !default;
 
-$selectize-shadow-input: inset 0 1px 1px rgba(0,0,0,0.1) !default;
-$selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15) !default;
-$selectize-border: 1px solid $selectize-color-border !default;
-$selectize-dropdown-border: 1px solid $selectize-color-dropdown-border !default;
-$selectize-border-radius: 3px !default;
+$select-width-item-border: 0px !default;
+$select-max-height-dropdown: 200px !default;
 
-$selectize-width-item-border: 0 !default;
-$selectize-max-height-dropdown: 200px !default;
+$select-padding-x: 8px !default;
+$select-padding-y: 8px !default;
+$select-padding-item-x: 6px !default;
+$select-padding-item-y: 2px !default;
+$select-padding-dropdown-item-x: $select-padding-x !default;
+$select-padding-dropdown-item-y: 5px !default;
+$select-margin-item-x: 3px !default;
+$select-margin-item-y: 3px !default;
 
-$selectize-padding-x: 8px !default;
-$selectize-padding-y: 8px !default;
-$selectize-padding-item-x: 6px !default;
-$selectize-padding-item-y: 2px !default;
-$selectize-padding-dropdown-item-x: $selectize-padding-x !default;
-$selectize-padding-dropdown-item-y: 5px !default;
-$selectize-margin-item-x: 3px !default;
-$selectize-margin-item-y: 3px !default;
+$select-arrow-size: 5px !default;
+$select-arrow-color: #808080 !default;
+$select-arrow-offset: 15px !default;
 
-$selectize-arrow-size: 5px !default;
-$selectize-arrow-color: #808080 !default;
-$selectize-arrow-offset: 15px !default;
+$select-caret-margin: 0 0px !default;
+$select-caret-margin-rtl: 0 4px 0 -2px !default;
 
-$selectize-caret-margin: 0 2px 0 0 !default;
-$selectize-caret-margin-rtl: 0 4px 0 -2px !default;
+$select-spinner-size: 30px;
+$select-spinner-border-size: 5px;
+$select-spinner-border-color: $select-color-border;
 
-@mixin selectize-border-radius($radii){
-  @if mixin-exists("border-radius") {
-    @include border-radius($radii)
-  } @else {
-    border-radius: $radii;
-  }
-}
-@mixin selectize-unselectable(){
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-@mixin selectize-box-shadow($shadow){
-  -webkit-box-shadow: $shadow;
-  box-shadow: $shadow;
-}
-@mixin selectize-box-sizing($type: border-box){
-  -webkit-box-sizing: $type;
-  -moz-box-sizing: $type;
-  box-sizing: $type;
-}
-@mixin selectize-vertical-gradient($color-top, $color-bottom){
+@mixin selectize-vertical-gradient($color-top, $color-bottom) {
   background-color: mix($color-top, $color-bottom, 60%);
-  background-image: -moz-linear-gradient(top, $color-top, $color-bottom); // FF 3.6+
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($color-top), to($color-bottom)); // Safari 4+, Chrome 2+
-  background-image: -webkit-linear-gradient(top, $color-top, $color-bottom); // Safari 5.1+, Chrome 10+
-  background-image: -o-linear-gradient(top, $color-top, $color-bottom); // Opera 11.10
-  background-image: linear-gradient(to bottom, $color-top, $color-bottom); // Standard, IE10
+  background-image: linear-gradient(to bottom, $color-top, $color-bottom);
   background-repeat: repeat-x;
-  //filter: e(%("progid:DXImageTransform.Microsoft@include gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb($color-top),argb($color-bottom))); // IE9 and down
 }
 
-.selectize-control {
+@import "plugins/drag_drop.scss";
+@import "plugins/dropdown_header.scss";
+@import "plugins/optgroup_columns.scss";
+@import "plugins/remove_button.scss";
+@import "plugins/clear_button.scss";
+@import "plugins/auto_position.scss";
+
+.#{$selectize}-control {
   position: relative;
 }
 
-.selectize-dropdown, .selectize-input, .selectize-input input {
-  color: $selectize-color-text;
-  font-family: $selectize-font-family;
-  font-size: $selectize-font-size;
-  line-height: $selectize-line-height;
-  -webkit-font-smoothing: $selectize-font-smoothing;
+.#{$selectize}-dropdown,
+.#{$selectize}-input,
+.#{$selectize}-input input {
+  color: $select-color-text;
+  font-family: $select-font-family;
+  font-size: $select-font-size;
+  line-height: $select-line-height;
+  font-smoothing: $select-font-smoothing;
 }
 
-.selectize-input, .selectize-control.single .selectize-input.input-active {
-  background: $selectize-color-input;
+.#{$selectize}-input,
+.#{$selectize}-control.single .#{$selectize}-input.input-active {
+  background: $select-color-input;
   cursor: text;
   display: inline-block;
 }
 
-.selectize-input {
-  border: $selectize-border;
-  padding: $selectize-padding-y $selectize-padding-x;
+.#{$selectize}-input {
+  border: $select-border;
+  padding: $select-padding-y $select-padding-x;
   display: inline-block;
   width: 100%;
-  overflow: hidden;
+  // overflow: hidden;
   position: relative;
   z-index: 1;
-  @include selectize-box-sizing(border-box);
-  @include selectize-box-shadow($selectize-shadow-input);
-  @include selectize-border-radius($selectize-border-radius);
+  box-sizing: border-box;
+  box-shadow: $select-shadow-input;
+  border-radius: $select-border-radius;
 
-  .selectize-control.multi &.has-items {
-	$padding-x: $selectize-padding-x;
-	$padding-top: calc(#{$selectize-padding-y} - #{$selectize-padding-item-y} - #{$selectize-width-item-border});
-	$padding-bottom: calc(#{$selectize-padding-y} - #{$selectize-padding-item-y} - #{$selectize-margin-item-y} - #{$selectize-width-item-border});
-	padding: $padding-top $padding-x $padding-bottom;
+  .#{$selectize}-control.multi &.has-items {
+    $padding-x: $select-padding-x;
+    $padding-top: calc(
+      #{$select-padding-y} - #{$select-padding-item-y} - #{$select-width-item-border}
+    );
+    $padding-bottom: calc(
+      #{$select-padding-y} - #{$select-padding-item-y} - #{$select-margin-item-y} -
+        #{$select-width-item-border}
+    );
+    padding: $padding-top $padding-x $padding-bottom;
   }
 
   &.full {
-	background-color: $selectize-color-input-full;
+    background-color: $select-color-input-full;
   }
-  &.disabled, &.disabled * {
-	cursor: default !important;
+  &.disabled,
+  &.disabled * {
+    cursor: default !important;
   }
   &.focus {
-	@include selectize-box-shadow($selectize-shadow-input-focus);
+    box-shadow: $select-shadow-input-focus;
   }
   &.dropdown-active {
-	@include selectize-border-radius($selectize-border-radius $selectize-border-radius 0 0);
+    border-radius: $select-border-radius $select-border-radius 0 0;
   }
 
   > * {
-	vertical-align: baseline;
-	display: -moz-inline-stack;
-	display: inline-block;
-	zoom: 1;
-	*display: inline;
+    vertical-align: baseline;
+    display: inline-block;
+    zoom: 1;
   }
-  .selectize-control.multi & > div {
-	cursor: pointer;
-	margin: 0 $selectize-margin-item-x $selectize-margin-item-y 0;
-	padding: $selectize-padding-item-y $selectize-padding-item-x;
-	background: $selectize-color-item;
-	color: $selectize-color-item-text;
-	border: $selectize-width-item-border solid $selectize-color-item-border;
+  .#{$selectize}-control.multi & > div {
+    cursor: pointer;
+    margin: 0 $select-margin-item-x $select-margin-item-y 0;
+    padding: $select-padding-item-y $select-padding-item-x;
+    background: $select-color-item;
+    color: $select-color-item-text;
+    border: $select-width-item-border solid $select-color-item-border;
 
-	&.active {
-	  background: $selectize-color-item-active;
-	  color: $selectize-color-item-active-text;
-	  border: $selectize-width-item-border solid $selectize-color-item-active-border;
-	}
+    &.active {
+      background: $select-color-item-active;
+      color: $select-color-item-active-text;
+      border: $select-width-item-border solid $select-color-item-active-border;
+    }
   }
-  .selectize-control.multi &.disabled > div {
-	&, &.active {
-	  color: lighten(desaturate($selectize-color-item-text, 100%), $selectize-lighten-disabled-item-text);
-	  background: lighten(desaturate($selectize-color-item, 100%), $selectize-lighten-disabled-item);
-	  border: $selectize-width-item-border solid lighten(desaturate($selectize-color-item-border, 100%), $selectize-lighten-disabled-item-border);
-	}
+  .#{$selectize}-control.multi &.disabled > div {
+    &,
+    &.active {
+      color: lighten(gray, $select-lighten-disabled-item-text);
+      background: lighten(gray, $select-lighten-disabled-item);
+      border: $select-width-item-border solid
+        lighten(gray, $select-lighten-disabled-item-border);
+    }
   }
   > input {
-	&::-ms-clear {
-	  display: none;
-	}
-	display: inline-block !important;
-	padding: 0 !important;
-	min-height: 0 !important;
-	max-height: none !important;
-	max-width: 100% !important;
-	margin: $selectize-caret-margin !important;
-	text-indent: 0 !important;
-	border: 0 none !important;
-	background: none !important;
-	line-height: inherit !important;
-	-webkit-user-select: auto !important;
-	@include selectize-box-shadow(none);
-	&:focus { outline: none !important; }
+    &::-ms-clear {
+      display: none;
+    }
+    display: inline-block !important;
+    padding: 0 !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    text-indent: 0 !important;
+    border: 0 none !important;
+    background: none !important;
+    line-height: inherit !important;
+    user-select: auto !important;
+    box-shadow: none !important;
+    &:focus {
+      outline: none !important;
+    }
+
+    &[placeholder] {
+      box-sizing: initial;
+    }
+  }
+  &.has-items > input {
+    margin: $select-caret-margin !important;
   }
 }
 
-.selectize-input::after {
-  content: ' ';
+.#{$selectize}-input::after {
+  content: " ";
   display: block;
   clear: left;
 }
 
-.selectize-input.dropdown-active::before {
-  content: ' ';
+.#{$selectize}-input.dropdown-active::before {
+  content: " ";
   display: block;
   position: absolute;
-  background: $selectize-color-dropdown-border-top;
+  background: $select-color-dropdown-border-top;
   height: 1px;
   bottom: 0;
   left: 0;
   right: 0;
 }
 
-.selectize-dropdown {
+.#{$selectize}-dropdown {
   position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
   z-index: 10;
-  border: $selectize-dropdown-border;
-  background: $selectize-color-dropdown;
+
+  border: $select-dropdown-border;
+  background: $select-color-dropdown;
   margin: -1px 0 0 0;
   border-top: 0 none;
-  @include selectize-box-sizing(border-box);
-  @include selectize-box-shadow(0 1px 3px rgba(0,0,0,0.1));
-  @include selectize-border-radius(0 0 $selectize-border-radius $selectize-border-radius);
+  box-sizing: border-box;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border-radius: 0 0 $select-border-radius $select-border-radius;
 
   [data-selectable] {
-	cursor: pointer;
-	overflow: hidden;
-	.highlight {
-	  background: $selectize-color-highlight;
-	  @include selectize-border-radius(1px);
-	}
+    cursor: pointer;
+    overflow: hidden;
+    .highlight {
+      background: $select-color-highlight;
+      border-radius: 1px;
+    }
   }
-  .option, .optgroup-header {
-	padding: $selectize-padding-dropdown-item-y $selectize-padding-dropdown-item-x;
+  .option,
+  .optgroup-header,
+  .no-results,
+  .create {
+    padding: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
   }
-  .option, [data-disabled], [data-disabled] [data-selectable].option {
-	cursor: inherit;
-	opacity: 0.5;
+  .option,
+  [data-disabled],
+  [data-disabled] [data-selectable].option {
+    cursor: inherit;
+    opacity: 0.5;
   }
   [data-selectable].option {
-	opacity: 1;
+    opacity: 1;
+    cursor: pointer;
   }
   .optgroup:first-child .optgroup-header {
-	border-top: 0 none;
+    border-top: 0 none;
   }
   .optgroup-header {
-	color: $selectize-color-optgroup-text;
-	background: $selectize-color-optgroup;
-	cursor: default;
+    color: $select-color-optgroup-text;
+    background: $select-color-optgroup;
+    cursor: default;
   }
   .active {
-	background-color: $selectize-color-dropdown-item-active;
-	color: $selectize-color-dropdown-item-active-text;
-	&.create {
-	  color: $selectize-color-dropdown-item-create-active-text;
-	}
+    background-color: $select-color-item-active;
+    color: $select-color-item-active-text;
+    &.create {
+      color: $select-color-dropdown-item-create-active-text;
+    }
+  }
+
+  .selected {
+    background-color: $select-color-item-active;
+    color: $select-color-item-active-text;
   }
   .create {
-	color: $selectize-color-dropdown-item-create-text;
+    color: $select-color-dropdown-item-create-text;
+  }
+
+  .active:not(.selected) {
+    background: $select-color-dropdown-item-active;
+    color: $select-color-dropdown-item-active-text;
   }
 }
 
-.selectize-dropdown-content {
+.#{$selectize}-dropdown-content {
   overflow-y: auto;
   overflow-x: hidden;
-  max-height: $selectize-max-height-dropdown;
-  -webkit-overflow-scrolling: touch;
+  max-height: $select-max-height-dropdown;
+  overflow-scrolling: touch;
 }
 
-.selectize-control.single .selectize-input {
-  &, input { cursor: pointer; }
-  &.input-active, &.input-active input { cursor: text; }
+.#{$selectize}-dropdown-emptyoptionlabel {
+	text-align: center;
+}
+
+.#{$selectize}-dropdown .spinner {
+  display: inline-block;
+  width: $select-spinner-size;
+  height: $select-spinner-size;
+  margin: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
 
   &:after {
-	content: ' ';
-	display: block;
-	position: absolute;
-	top: 50%;
-	right: $selectize-arrow-offset;
-	margin-top: round((-1 * $selectize-arrow-size / 2));
-	width: 0;
-	height: 0;
-	border-style: solid;
-	border-width: $selectize-arrow-size $selectize-arrow-size 0 $selectize-arrow-size;
-	border-color: $selectize-arrow-color transparent transparent transparent;
+    content: " ";
+    display: block;
+    width: $select-spinner-size * 0.8;
+    height: $select-spinner-size * 0.8;
+    margin: $select-spinner-size * 0.1;
+    border-radius: 50%;
+    border: $select-spinner-border-size solid $select-spinner-border-color;
+    border-color: $select-spinner-border-color transparent
+      $select-spinner-border-color transparent;
+    animation: lds-dual-ring 1.2s linear infinite;
   }
-  &.dropdown-active:after {
-	margin-top: $selectize-arrow-size * -0.8;
-	border-width: 0 $selectize-arrow-size $selectize-arrow-size $selectize-arrow-size;
-	border-color: transparent transparent $selectize-arrow-color transparent;
+  @keyframes lds-dual-ring {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 }
 
-.selectize-control.rtl {
-  &.single .selectize-input:after {
-	left: $selectize-arrow-offset;
-	right: auto;
+.#{$selectize}-control.single .#{$selectize}-input {
+  &,
+  input {
+    cursor: pointer;
   }
-  .selectize-input > input {
-	margin: $selectize-caret-margin-rtl !important;
+  &.input-active,
+  &.input-active input:not(:read-only) {
+    cursor: text;
+  }
+
+  &:not(.no-arrow):after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: $select-arrow-offset;
+    margin-top: round(divide(-1 * $select-arrow-size, 2));
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: $select-arrow-size $select-arrow-size 0 $select-arrow-size;
+    border-color: $select-arrow-color transparent transparent transparent;
+  }
+  &:not(.no-arrow).dropdown-active:after {
+    margin-top: $select-arrow-size * -0.8;
+    border-width: 0 $select-arrow-size $select-arrow-size $select-arrow-size;
+    border-color: transparent transparent $select-arrow-color transparent;
   }
 }
 
-.selectize-control .selectize-input.disabled {
-  opacity: $selectize-opacity-disabled;
-  background-color: $selectize-color-disabled;
+.#{$selectize}-control.rtl {
+  text-align: right;
+  &.single .#{$selectize}-input:after {
+    left: $select-arrow-offset;
+    right: auto;
+  }
+  .#{$selectize}-input > input {
+    margin: $select-caret-margin-rtl !important;
+  }
+}
+
+.#{$selectize}-control .#{$selectize}-input.disabled {
+  opacity: $select-opacity-disabled;
+  background-color: $select-color-disabled;
 }

inst/www/shared/shiny-showcase.css

@@ -1,2 +1,2 @@
-/*! shiny 1.7.5.9000 | (c) 2012-2023 RStudio, PBC. | License: GPL-3 | file LICENSE */
+/*! shiny 1.8.0 | (c) 2012-2023 RStudio, PBC. | License: GPL-3 | file LICENSE */
 #showcase-well{border-radius:0}.shiny-code{background-color:#fff;margin-bottom:0}.shiny-code code{font-family:Menlo,Consolas,Courier New,monospace}.shiny-code-container{margin-top:20px;clear:both}.shiny-code-container h3{display:inline;margin-right:15px}.showcase-header{font-size:16px;font-weight:400}.showcase-code-link{text-align:right;padding:15px}#showcase-app-container{vertical-align:top}#showcase-code-tabs{margin-right:15px}#showcase-code-tabs pre{border:none;line-height:1em}#showcase-code-tabs .nav,#showcase-code-tabs ul{margin-bottom:0}#showcase-code-tabs .tab-content{border-style:solid;border-color:#e5e5e5;border-width:0px 1px 1px 1px;overflow:auto;border-bottom-right-radius:4px;border-bottom-left-radius:4px}#showcase-app-code{width:100%}#showcase-code-position-toggle{float:right}#showcase-sxs-code{padding-top:20px;vertical-align:top}.showcase-code-license{display:block;text-align:right}#showcase-code-content pre{background-color:#fff}

inst/www/shared/shiny-testmode.js

@@ -1,3 +1,3 @@
-/*! shiny 1.7.5.9000 | (c) 2012-2023 RStudio, PBC. | License: GPL-3 | file LICENSE */
+/*! shiny 1.8.0 | (c) 2012-2023 RStudio, PBC. | License: GPL-3 | file LICENSE */
 "use strict";(function(){var a=eval;window.addEventListener("message",function(i){var e=i.data;e.code&&a(e.code)});})();
 //# sourceMappingURL=shiny-testmode.js.map

inst/www/shared/shiny_scss/shiny.bootstrap3.scss

@@ -1,13 +1,7 @@
 $bg: $body-bg !default;
+$fg: $text-color !default; // BS3
+$theme-colors: ("primary": $brand-primary, "info": $brand-info, "warning": $brand-warning, "danger": $brand-danger) !default;
 
-$fg: null !default;
-$theme-colors: null !default;
-@if variable-exists('text-color') {
-  $fg: $text-color !default; // BS3
-  $theme-colors: ("primary": $brand-primary, "info": $brand-info, "warning": $brand-warning, "danger": $brand-danger) !default;
-} @else {
-  $fg: $body-color !default; // BS4
-}
 // No $border-width, $border-color, or $border-radius in BS3
 $border-width: 1px !default;
 $border-color: mix($bg, $fg, 70%) !default;
@@ -16,7 +10,6 @@ $border-radius: $border-radius-base !default;
 $shiny-disconnected-bg:             mix($bg, $fg, 58%) !default;
 $shiny-table-na:                    mix($bg, $fg, 54%) !default;
 $shiny-error-validated-color:       mix($bg, $fg, 50%) !default;
-// TODO: what should this be? mix of primary and bg?
 $shiny-progress-text-bg-color:      #eef8ff !default;
 $shiny-input-panel-bg:              mix($bg, $fg, 96%) !default;
 $shiny-input-panel-border:          $border-width solid $border-color !default;
@@ -39,11 +32,3 @@ $notification-close-color:          mix($bg, $fg, 20%) !default;
 $notification-close-hover-color:    $fg !default;
 $notification-content-action-color: map-get($theme-colors, "primary") !default;
 $datepicker-disabled-color:         $dropdown-link-disabled-color !default;
-
-// I don't think BS3 has a file input box shadow setting
-@if variable-exists('custom-file-focus-box-shadow') {
-  $shiny-file-active-shadow: $custom-file-focus-box-shadow !default;
-}
-
-// TODO: should this be changed to danger?
-//$shiny-error-color:                 red !default;

inst/www/shared/shiny_scss/shiny.bootstrap4.scss

@@ -0,0 +1,30 @@
+$bg: $body-bg !default;
+$fg: $body-color !default;
+
+$shiny-disconnected-bg:             mix($bg, $fg, 58%) !default;
+$shiny-table-na:                    mix($bg, $fg, 54%) !default;
+$shiny-error-validated-color:       mix($bg, $fg, 50%) !default;
+$shiny-progress-text-bg-color:      #eef8ff !default;
+$shiny-input-panel-bg:              mix($bg, $fg, 96%) !default;
+$shiny-input-panel-border:          $border-width solid $border-color !default;
+$shiny-input-panel-border-radius:   $border-radius !default;
+$shiny-text-output-border-radius:   $border-radius !default;
+$notification-bg-color:             mix($bg, $fg, 90%) !default;
+$notification-color:                $fg !default;
+$notification-border:               $border-width solid $border-color !default;
+$notification-border-radius:        $border-radius !default;
+$notification-message-bg:           mix($bg, map-get($theme-colors, "info"), 90%) !default;
+$notification-message-color:        mix($fg, map-get($theme-colors, "info"), 10%) !default;
+$notification-message-border:       $border-width solid mix($bg, map-get($theme-colors, "info"), 53%) !default;
+$notification-warning-bg:           mix($bg, map-get($theme-colors, "warning"), 90%) !default;
+$notification-warning-color:        mix($fg, map-get($theme-colors, "warning"), 10%) !default;
+$notification-warning-border:       $border-width solid mix($bg, map-get($theme-colors, "warning"), 71%) !default;
+$notification-error-bg:             mix($bg, map-get($theme-colors, "danger"), 90%) !default;
+$notification-error-color:          mix($fg, map-get($theme-colors, "danger"), 10%) !default;
+$notification-error-border:         $border-width solid mix($bg, map-get($theme-colors, "danger"), 79%) !default;
+$notification-close-color:          mix($bg, $fg, 20%) !default;
+$notification-close-hover-color:    $fg !default;
+$notification-content-action-color: map-get($theme-colors, "primary") !default;
+$datepicker-disabled-color:         $dropdown-link-disabled-color !default;
+
+$shiny-file-active-shadow: $custom-file-focus-box-shadow !default;

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

@@ -0,0 +1,39 @@
+$body-emphasis-color: $body-color !default; // introduced in BS 5.3
+
+$shiny-emphasis-color-rgb:          var(--#{$prefix}emphasis-color-rgb, 0,0,0) !default;
+
+$shiny-disconnected-bg:             RGBA($shiny-emphasis-color-rgb, 0.42) !default;
+$shiny-table-na:                    RGBA($shiny-emphasis-color-rgb, 0.46) !default;
+$shiny-error-color:                 var(--#{$prefix}danger-text-emphasis) !default;
+$shiny-error-validated-color:       RGBA($shiny-emphasis-color-rgb, 0.5) !default;
+$shiny-progress-text-bg-color:      RGBA(var(--#{$prefix}primary-rgb, #{to-rgb($primary)}), 0.05) !default;
+
+$shiny-input-panel-bg:              RGBA($shiny-emphasis-color-rgb, 0.04) !default;
+$shiny-input-panel-border:          $border-width solid var(--#{$prefix}border-color, #{$border-color}) !default;
+$shiny-input-panel-border-radius:   $border-radius !default;
+$shiny-text-output-border-radius:   $border-radius !default;
+
+$notification-color:                var(--#{$prefix}emphasis-color, #{$body-emphasis-color}) !default;
+$notification-bg-color:             var(--#{$prefix}body-bg, #{$body-bg}) !default;
+$notification-border:               $border-width solid var(--#{$prefix}border-color, #{$border-color}) !default;
+$notification-border-radius:        $border-radius !default;
+
+$notification-message-color:        var(--#{$prefix}info-text-emphasis) !default;
+$notification-message-bg:           var(--#{$prefix}info-bg-subtle) !default;
+$notification-message-border:       $border-width solid var(--#{$prefix}info-border-subtle) !default;
+
+$notification-warning-color:        var(--#{$prefix}warning-text-emphasis) !default;
+$notification-warning-bg:           var(--#{$prefix}warning-bg-subtle) !default;
+$notification-warning-border:       $border-width solid var(--#{$prefix}warning-border-subtle) !default;
+
+$notification-error-color:          var(--#{$prefix}danger-text-emphasis) !default;
+$notification-error-bg:             var(--#{$prefix}danger-bg-subtle) !default;
+$notification-error-border:         $border-width solid var(--#{$prefix}danger-border-subtle) !default;
+
+$notification-close-color:          RGBA($shiny-emphasis-color-rgb, 0.8) !default;
+$notification-close-hover-color:    RGB($shiny-emphasis-color-rgb) !default;
+$notification-content-action-color: RGB(var(--#{$prefix}primary-rgb, #{to-rgb($primary)})) !default;
+
+$datepicker-disabled-color:         $dropdown-link-disabled-color !default;
+
+$shiny-file-active-shadow:          $input-focus-box-shadow !default;

inst/www/shared/shiny_scss/shiny.scss

@@ -13,7 +13,7 @@ $notification-bg-color:             #e8e8e8 !default;
 $notification-color:                #333 !default;
 $notification-border:               1px solid #ccc !default;
 $notification-border-radius:        3px !default;
-$notification-padding:              10px 8px 10px 10px !default;
+$notification-padding:              10px 2rem 10px 10px !default;
 $notification-message-bg:           #d9edf7 !default;
 $notification-message-color:        #31708f !default;
 $notification-message-border:       1px solid #bce8f1 !default;
@@ -88,10 +88,7 @@ pre.shiny-text-output {
 
 #shiny-disconnected-overlay {
   position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   background-color: $shiny-disconnected-bg;
   opacity: 0.5;
   overflow: hidden;
@@ -99,6 +96,17 @@ pre.shiny-text-output {
   pointer-events: none;
 }
 
+html.autoreload-enabled #shiny-disconnected-overlay.reloading {
+  opacity: 0;
+  animation: fadeIn 250ms forwards;
+  animation-delay: 1s;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 0.1;
+  }
+}
+
 .table.shiny-table {
   @include table-padding($left: 12px, $right: 12px);
 }
@@ -184,6 +192,12 @@ pre.shiny-text-output {
   }
 }
 
+// fileInput()'s button should never have a top-right or bottom-right border-radius
+.btn-file {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
 /* Make sure the filename doesn't extend past the bounds of the container */
 .shiny-input-container input[type=file] {
   overflow: hidden;
@@ -307,11 +321,6 @@ pre.shiny-text-output {
   zoom: 1.0000001;
 }
 
-/* consistency with bootstrap.css for selectize.js */
-.selectize-control {
-  margin-bottom: 10px;
-}
-
 .shiny-frame {
   border: none;
 }
@@ -381,18 +390,19 @@ pre.shiny-text-output {
   right: 0;
   background-color: rgba(0,0,0,0);
   padding: 2px;
-  width: 250px;
+  width: 300px;
   z-index: 99999;
 }
 
 .shiny-notification {
+  position: relative;
   background-color: $notification-bg-color;
   color: $notification-color;
   border: $notification-border;
   @include border-radius-shim($notification-border-radius);
   opacity: 0.85;
   padding: $notification-padding;
-  margin: 2px;
+  margin: 5px;
   &-message {
     color: $notification-message-color;
     background-color: $notification-message-bg;
@@ -409,17 +419,23 @@ pre.shiny-text-output {
     border: $notification-error-border;
   }
   &-close {
-    float: right;
-    font-weight: bold;
-    font-size: 18px;
-    bottom: 9px;
-    position: relative;
-    padding-left: 4px;
+    position: absolute;
+    width: 2rem;
+    height: 2rem;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: normal;
+    font-size: 1.125em;
+    padding: 0.25rem;
     color: $notification-close-color;
-    cursor: default;
+    cursor: pointer;
   }
   &-close:hover {
     color: $notification-close-hover-color;
+    font-weight: bold;
   }
   &-content-action a {
     color: $notification-content-action-color;

man/fileInput.Rd

@@ -24,9 +24,9 @@ fileInput(
 multiple files at once. \strong{Does not work on older browsers, including
 Internet Explorer 9 and earlier.}}
 
-\item{accept}{A character vector of "unique file type specifiers" which
-gives the browser a hint as to the type of file the server expects.
-Many browsers use this prevent the user from selecting an invalid file.
+\item{accept}{A character vector of "unique file type specifiers" which gives
+the browser a hint as to the type of file the server expects. Many browsers
+use this prevent the user from selecting an invalid file.
 
 A unique file type specifier can be:
 \itemize{
@@ -61,12 +61,19 @@ still photos only, also use \code{accept="image/*"}. For video only, use
 Create a file upload control that can be used to upload one or more files.
 }
 \details{
-Whenever a file upload completes, the corresponding input variable is set
-to a dataframe. See the \verb{Server value} section.
+Whenever a file upload completes, the corresponding input variable is set to
+a dataframe. See the \verb{Server value} section.
+
+Each time files are uploaded, they are written to a new random subdirectory
+inside of R's process-level temporary directory. The Shiny user session keeps
+track of all uploads in the session, and when the session ends, Shiny deletes
+all of the subdirectories where files where uploaded to.
 }
 \section{Server value}{
 
-A \code{data.frame} that contains one row for each selected file, and following columns:
+
+A \code{data.frame} that contains one row for each selected file, and following
+columns:
 \describe{
 \item{\code{name}}{The filename provided by the web browser. This is
 \strong{not} the path to read to get at the actual data that was uploaded

man/selectInput.Rd

@@ -62,7 +62,7 @@ from a list of values.
 }
 \details{
 By default, \code{selectInput()} and \code{selectizeInput()} use the JavaScript library
-\pkg{selectize.js} (<https://selectize.dev/) instead of
+\pkg{selectize.js} (\url{https://selectize.dev/}) instead of
 the basic select input element. To use the standard HTML select input
 element, use \code{selectInput()} with \code{selectize=FALSE}.
 

package.json

@@ -3,7 +3,7 @@
   "homepage": "https://shiny.rstudio.com",
   "repository": "github:rstudio/shiny",
   "name": "@types/rstudio-shiny",
-  "version": "1.7.5-alpha.9000",
+  "version": "1.8.0",
   "license": "GPL-3.0-only",
   "main": "",
   "browser": "",
@@ -33,6 +33,7 @@
     "@babel/preset-typescript": "^7.13.0",
     "@babel/runtime": "^7.14.0",
     "@deanc/esbuild-plugin-postcss": "^1.0.2",
+    "@selectize/selectize": "https://github.com/selectize/selectize.js.git#e3f2e0b4aa251375bc21b5fcd8ca7d374a921f08",
     "@testing-library/dom": "^7.31.0",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/user-event": "^13.1.9",

revdep/README.md

@@ -1,28 +1,22 @@
 # Revdeps
 
-## Failed to check (21)
+## Failed to check (15)
 
-|package    |version |error |warning |note |
-|:----------|:-------|:-----|:-------|:----|
-|NA         |?       |      |        |     |
-|NA         |?       |      |        |     |
-|NA         |?       |      |        |     |
-|ctsem      |3.7.6   |1     |        |     |
-|disk.frame |0.8.2   |1     |        |     |
-|diveR      |?       |      |        |     |
-|NA         |?       |      |        |     |
-|NA         |?       |      |        |     |
-|grandR     |?       |      |        |     |
-|NA         |?       |      |        |     |
-|NA         |?       |      |        |     |
-|NA         |?       |      |        |     |
-|NA         |?       |      |        |     |
-|NA         |?       |      |        |     |
-|loon.shiny |?       |      |        |     |
-|NA         |?       |      |        |     |
-|NA         |?       |      |        |     |
-|RQuantLib  |0.4.18  |1     |        |     |
-|rstanarm   |2.21.4  |1     |        |     |
-|NA         |?       |      |        |     |
-|NA         |?       |      |        |     |
+|package            |version |error |warning |note |
+|:------------------|:-------|:-----|:-------|:----|
+|bigPint            |?       |      |        |     |
+|bioCancer          |?       |      |        |     |
+|ctsem              |3.9.1   |1     |        |     |
+|diveR              |?       |      |        |     |
+|EBImage            |?       |      |        |     |
+|GeneNetworkBuilder |?       |      |        |     |
+|InterCellar        |?       |      |        |     |
+|LACE               |?       |      |        |     |
+|loon.shiny         |?       |      |        |     |
+|MatrixQCvis        |?       |      |        |     |
+|modchart           |?       |      |        |     |
+|omicsViewer        |?       |      |        |     |
+|parcats            |?       |      |        |     |
+|RQuantLib          |0.4.19  |1     |        |     |
+|rstanarm           |2.26.1  |1     |        |     |
 

revdep/cran.md

@@ -1,18 +1,16 @@
 ## revdepcheck results
 
-We checked 1145 reverse dependencies (1131 from CRAN + 14 from Bioconductor), comparing R CMD check results across CRAN and dev versions of this package.
+We checked 1172 reverse dependencies (1162 from CRAN + 10 from Bioconductor), comparing R CMD check results across CRAN and dev versions of this package.
 
  * We saw 0 new problems
- * We failed to check 7 packages
+ * We failed to check 5 packages
 
 Issues with CRAN packages are summarised below.
 
 ### Failed to check
 
 * ctsem      (NA)
-* disk.frame (NA)
 * diveR      (NA)
-* grandR     (NA)
 * loon.shiny (NA)
 * RQuantLib  (NA)
 * rstanarm   (NA)

srcts/build/external_libs.ts

@@ -55,6 +55,14 @@ build({
   minify: true,
 });
 
+build({
+  ...opts,
+  entryPoints: [outDir + "selectize/js/selectize.js"],
+  outfile: outDir + "selectize/js/selectize.min.js",
+  minify: true,
+  target: "es6",
+});
+
 build({
   ...opts,
   entryPoints: [outDir + "selectize/accessibility/js/selectize-plugin-a11y.js"],

srcts/extras/shiny-autoreload.ts

@@ -1,18 +1,86 @@
 /* eslint-disable unicorn/filename-case */
-const protocol = (window.location.protocol === "https:") ? "wss:" : "ws:";
+
+document.documentElement.classList.add("autoreload-enabled");
+
+const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 // Add trailing slash to path, if necessary, before appending "autoreload"
-const defaultPath = window.location.pathname.replace(/\/?$/, "/") + "autoreload/";
+const defaultPath =
+  window.location.pathname.replace(/\/?$/, "/") + "autoreload/";
 const defaultUrl = `${protocol}//${window.location.host}${defaultPath}`;
 
 // By default, use the defaultUrl. But if there's a data-ws-url attribute on our
 // <script> tag, use that instead.
-const wsUrl = document.currentScript.dataset.wsUrl || defaultUrl;
-const ws = new WebSocket(wsUrl);
+const wsUrl = document.currentScript?.dataset?.wsUrl || defaultUrl;
 
-ws.onmessage = function (event) {
-  if (event.data === "autoreload") {
-    window.location.reload();
+/**
+ * Connects to an autoreload URL and waits for the server to tell us what to do.
+ *
+ * @param url The ws:// or wss:// URL to connect to.
+ * @returns true if the server requests a reload, or false if the connection was
+ * successfully established but then closed without the server requesting a
+ * reload
+ * @throws A nondescript error if the connection fails to be established.
+ */
+async function autoreload(url: string): Promise<boolean> {
+  const ws = new WebSocket(url);
+
+  let success = false;
+
+  return new Promise((resolve, reject) => {
+    ws.onopen = () => {
+      success = true;
+    };
+
+    ws.onerror = (err) => {
+      reject(err);
+    };
+
+    ws.onclose = () => {
+      if (!success) {
+        reject(new Error("WebSocket connection failed"));
+      } else {
+        resolve(false);
+      }
+    };
+
+    ws.onmessage = function (event) {
+      if (event.data === "autoreload") {
+        resolve(true);
+      }
+    };
+  });
+}
+
+async function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function initialize() {
+  while (true) {
+    try {
+      if (await autoreload(wsUrl)) {
+        window.location.reload();
+        return;
+      }
+    } catch (err) {
+      // It's possible for the autoreload() call to throw. If it does, that
+      // means we tried but failed to connect to the autoreload socket. This
+      // probably means that the entire `shiny run --reload` process was
+      // restarted. As of today, the autoreload websocket port number is
+      // randomly chosen for each `shiny run --reload` process, so it's
+      // impossible for us to recover.
+      console.debug("Giving up on autoreload");
+      return;
+    }
+    // If we get here, the connection to the autoreload server was
+    // successful but then got broken. Wait for a second, and then
+    // try to re-establish the connection.
+    await sleep(1000);
   }
-};
+}
+
+initialize().catch((err) => {
+  console.error(err);
+});
 
 export {};

srcts/src/bindings/input/inputBinding.ts

@@ -44,7 +44,7 @@ class InputBinding {
   // 'data' should be an object with elements corresponding to value, min,
   // max, etc., as appropriate for the type of input object. It also should
   // trigger a change event.
-  receiveMessage(el: HTMLElement, data: unknown): void {
+  receiveMessage(el: HTMLElement, data: unknown): Promise<void> | void {
     throw "Not implemented";
     el; // unused var
     data; // unused var

srcts/src/bindings/input/selectInput.ts

@@ -2,7 +2,6 @@ import $ from "jquery";
 import { InputBinding } from "./inputBinding";
 import { $escape, hasDefinedProperty, updateLabel } from "../../utils";
 import { indirectEval } from "../../utils/eval";
-import type { NotUndefined } from "../../utils/extraTypes";
 
 type SelectHTMLElement = HTMLSelectElement & { nonempty: boolean };
 
@@ -61,10 +60,14 @@ class SelectInputBinding extends InputBinding {
   getId(el: SelectHTMLElement): string {
     return InputBinding.prototype.getId.call(this, el) || el.name;
   }
-  getValue(
-    el: HTMLElement
-  ): NotUndefined<ReturnType<JQuery<HTMLElement>["val"]>> {
-    return $(el).val() as NotUndefined<ReturnType<JQuery<HTMLElement>["val"]>>;
+  getValue(el: SelectHTMLElement): any {
+    if (!isSelectize(el)) {
+      return $(el).val();
+    } else {
+      const selectize = this._selectize(el);
+
+      return selectize?.getValue();
+    }
   }
   setValue(el: SelectHTMLElement, value: string): void {
     if (!isSelectize(el)) {
@@ -145,6 +148,7 @@ class SelectInputBinding extends InputBinding {
       selectize.settings.load = function (query: string, callback: CallbackFn) {
         const settings = selectize.settings;
 
+        /* eslint-disable @typescript-eslint/no-floating-promises */
         $.ajax({
           url: data.url,
           data: {
@@ -292,6 +296,7 @@ class SelectInputBinding extends InputBinding {
       control.destroy();
       control = $el.selectize(settings)[0].selectize as SelectizeInfo;
     }
+
     return control;
   }
 }

srcts/src/file/fileProcessor.ts

@@ -180,6 +180,7 @@ class FileUploader extends FileProcessor {
   onFile(file: File, cont: () => void): void {
     this.onProgress(file, 0);
 
+    /* eslint-disable @typescript-eslint/no-floating-promises */
     $.ajax(this.uploadUrl, {
       type: "POST",
       cache: false,

srcts/src/shiny/bind.ts

@@ -140,14 +140,14 @@ function bindInputs(
   return inputItems;
 }
 
-function bindOutputs(
+async function bindOutputs(
   {
     sendOutputHiddenState,
     maybeAddThemeObserver,
     outputBindings,
   }: BindInputsCtx,
   scope: BindScope = document.documentElement
-): void {
+): Promise<void> {
   const $scope = $(scope);
 
   const bindings = outputBindings.getBindings();
@@ -184,7 +184,7 @@ function bindOutputs(
 
       const bindingAdapter = new OutputBindingAdapter(el, binding);
 
-      shinyAppBindOutput(id, bindingAdapter);
+      await shinyAppBindOutput(id, bindingAdapter);
       $el.data("shiny-output-binding", bindingAdapter);
       $el.addClass("shiny-bound-output");
       if (!$el.attr("aria-live")) $el.attr("aria-live", "polite");
@@ -270,11 +270,11 @@ function unbindOutputs(
 
 // (Named used before TS conversion)
 // eslint-disable-next-line @typescript-eslint/naming-convention
-function _bindAll(
+async function _bindAll(
   shinyCtx: BindInputsCtx,
   scope: BindScope
-): ReturnType<typeof bindInputs> {
-  bindOutputs(shinyCtx, scope);
+): Promise<ReturnType<typeof bindInputs>> {
+  await bindOutputs(shinyCtx, scope);
   return bindInputs(shinyCtx, scope);
 }
 function unbindAll(
@@ -285,10 +285,13 @@ function unbindAll(
   unbindInputs(scope, includeSelf);
   unbindOutputs(shinyCtx, scope, includeSelf);
 }
-function bindAll(shinyCtx: BindInputsCtx, scope: BindScope): void {
+async function bindAll(
+  shinyCtx: BindInputsCtx,
+  scope: BindScope
+): Promise<void> {
   // _bindAll returns input values; it doesn't send them to the server.
   // Shiny.bindAll needs to send the values to the server.
-  const currentInputItems = _bindAll(shinyCtx, scope);
+  const currentInputItems = await _bindAll(shinyCtx, scope);
 
   const inputs = shinyCtx.inputs;
 

srcts/src/shiny/index.ts

@@ -111,6 +111,7 @@ function setShiny(windowShiny_: Shiny): void {
     // Init Shiny a little later than document ready, so user code can
     // run first (i.e. to register bindings)
     setTimeout(function () {
+      /* eslint-disable @typescript-eslint/no-floating-promises */
       initShiny(windowShiny);
     }, 1);
   });

srcts/src/shiny/init.ts

@@ -28,7 +28,7 @@ import { registerNames as singletonsRegisterNames } from "./singletons";
 import type { InputPolicyOpts } from "../inputPolicies/inputPolicy";
 
 // "init_shiny.js"
-function initShiny(windowShiny: Shiny): void {
+async function initShiny(windowShiny: Shiny): Promise<void> {
   setShinyObj(windowShiny);
   const shinyapp = (windowShiny.shinyapp = new ShinyApp());
 
@@ -95,8 +95,8 @@ function initShiny(windowShiny: Shiny): void {
     };
   }
 
-  windowShiny.bindAll = function (scope: BindScope) {
-    bindAll(shinyBindCtx(), scope);
+  windowShiny.bindAll = async function (scope: BindScope) {
+    await bindAll(shinyBindCtx(), scope);
   };
   windowShiny.unbindAll = function (scope: BindScope, includeSelf = false) {
     unbindAll(shinyBindCtx(), scope, includeSelf);
@@ -146,7 +146,7 @@ function initShiny(windowShiny: Shiny): void {
   // have a reference to the DOM element, which would prevent it from being
   // GC'd.
   const initialValues = mapValues(
-    _bindAll(shinyBindCtx(), document.documentElement),
+    await _bindAll(shinyBindCtx(), document.documentElement),
     (x) => x.value
   );
 

srcts/src/shiny/initedMethods.ts

@@ -55,8 +55,8 @@ function setShinyUser(user: string): void {
 function shinyForgetLastInputValue(name: string): void {
   validateShinyHasBeenSet().forgetLastInputValue(name);
 }
-function shinyBindAll(scope: BindScope): void {
-  validateShinyHasBeenSet().bindAll(scope);
+async function shinyBindAll(scope: BindScope): Promise<void> {
+  await validateShinyHasBeenSet().bindAll(scope);
 }
 function shinyUnbindAll(scope: BindScope, includeSelf = false): void {
   validateShinyHasBeenSet().unbindAll(scope, includeSelf);
@@ -65,8 +65,11 @@ function shinyInitializeInputs(scope: BindScope): void {
   validateShinyHasBeenSet().initializeInputs(scope);
 }
 
-function shinyAppBindOutput(id: string, binding: OutputBindingAdapter): void {
-  shinyShinyApp().bindOutput(id, binding);
+async function shinyAppBindOutput(
+  id: string,
+  binding: OutputBindingAdapter
+): Promise<void> {
+  await shinyShinyApp().bindOutput(id, binding);
 }
 
 function shinyAppUnbindOutput(

srcts/src/shiny/reactlog.ts

@@ -50,6 +50,7 @@ function initReactlog(): void {
       window.escape(shinyAppConfig().sessionId);
 
     // send notification
+    /* eslint-disable @typescript-eslint/no-floating-promises */
     $.get(url, function (result: "marked" | void) {
       if (result !== "marked") return;
 

srcts/src/shiny/reconnectDialog.ts

@@ -22,7 +22,7 @@ function updateTime(reconnectTime: number): void {
   }, 1000);
 }
 
-function showReconnectDialog(delay: number): void {
+async function showReconnectDialog(delay: number): Promise<void> {
   const reconnectTime = new Date().getTime() + delay;
 
   // If there's already a reconnect dialog, don't add another
@@ -34,7 +34,7 @@ function showReconnectDialog(delay: number): void {
   const action =
     '<a id="shiny-reconnect-now" href="#" onclick="Shiny.shinyapp.reconnect();">Try now</a>';
 
-  showNotification({
+  await showNotification({
     id: "reconnect",
     html: html,
     action: action,

srcts/src/shiny/render.ts

@@ -62,7 +62,7 @@ async function renderContentAsync(
 
   if (where === "replace") {
     shinyInitializeInputs(el);
-    shinyBindAll(el);
+    await shinyBindAll(el);
   } else {
     const $parent = $(el).parent();
 
@@ -75,7 +75,7 @@ async function renderContentAsync(
       }
     }
     shinyInitializeInputs(scope);
-    shinyBindAll(scope);
+    await shinyBindAll(scope);
   }
 }
 
@@ -83,7 +83,7 @@ function renderContent(
   el: BindScope,
   content: string | { html: string; deps?: HtmlDep[] } | null,
   where: WherePosition = "replace"
-): void {
+): Promise<void> {
   if (where === "replace") {
     shinyUnbindAll(el);
   }
@@ -106,7 +106,7 @@ function renderContent(
 
   if (where === "replace") {
     shinyInitializeInputs(el);
-    shinyBindAll(el);
+    return shinyBindAll(el);
   } else {
     const $parent = $(el).parent();
 
@@ -119,7 +119,7 @@ function renderContent(
       }
     }
     shinyInitializeInputs(scope);
-    shinyBindAll(scope);
+    return shinyBindAll(scope);
   }
 }
 

srcts/src/shiny/shinyapp.ts

@@ -237,6 +237,9 @@ class ShinyApp {
         socket.send(msg as string);
       }
 
+      // This launches the action queue loop, which just runs in the background,
+      // so we don't need to await it.
+      /* eslint-disable @typescript-eslint/no-floating-promises */
       this.startActionQueueLoop();
     };
     socket.onmessage = (e) => {
@@ -244,7 +247,8 @@ class ShinyApp {
     };
     // Called when a successfully-opened websocket is closed, or when an
     // attempt to open a connection fails.
-    socket.onclose = () => {
+    socket.onclose = (e) => {
+      const restarting = e.code === 1012; // Uvicorn sets this code when autoreloading
       // These things are needed only if we've successfully opened the
       // websocket.
       if (hasOpened) {
@@ -257,7 +261,7 @@ class ShinyApp {
         this.$notifyDisconnected();
       }
 
-      this.onDisconnected(); // Must be run before this.$removeSocket()
+      this.onDisconnected(restarting); // Must be run before this.$removeSocket()
       this.$removeSocket();
     };
     return socket;
@@ -333,13 +337,12 @@ class ShinyApp {
     };
   })();
 
-  onDisconnected(): void {
+  onDisconnected(reloading = false): void {
     // Add gray-out overlay, if not already present
-    const $overlay = $("#shiny-disconnected-overlay");
-
-    if ($overlay.length === 0) {
+    if ($("#shiny-disconnected-overlay").length === 0) {
       $(document.body).append('<div id="shiny-disconnected-overlay"></div>');
     }
+    $("#shiny-disconnected-overlay").toggleClass("reloading", reloading);
 
     // To try a reconnect, both the app (this.$allowReconnect) and the
     // server (this.$socket.allowReconnect) must allow reconnections, or
@@ -507,12 +510,16 @@ class ShinyApp {
     return value;
   }
 
-  bindOutput(id: string, binding: OutputBindingAdapter): OutputBindingAdapter {
+  async bindOutput(
+    id: string,
+    binding: OutputBindingAdapter
+  ): Promise<OutputBindingAdapter> {
     if (!id) throw "Can't bind an element with no ID";
     if (this.$bindings[id]) throw "Duplicate binding for ID " + id;
     this.$bindings[id] = binding;
 
-    if (this.$values[id] !== undefined) binding.onValueChange(this.$values[id]);
+    if (this.$values[id] !== undefined)
+      await binding.onValueChange(this.$values[id]);
     else if (this.$errors[id] !== undefined)
       binding.onValueError(this.$errors[id]);
 
@@ -710,7 +717,7 @@ class ShinyApp {
 
     addMessageHandler(
       "inputMessages",
-      (message: Array<{ id: string; message: unknown }>) => {
+      async (message: Array<{ id: string; message: unknown }>) => {
         // inputMessages should be an array
         for (let i = 0; i < message.length; i++) {
           const $obj = $(".shiny-bound-input#" + $escape(message[i].id));
@@ -727,7 +734,7 @@ class ShinyApp {
             $(el).trigger(evt);
             if (!evt.isDefaultPrevented()) {
               try {
-                inputBinding.receiveMessage(el, evt.message);
+                await inputBinding.receiveMessage(el, evt.message);
               } catch (error) {
                 console.error(
                   "[shiny] Error in inputBinding.receiveMessage()",
@@ -819,15 +826,15 @@ class ShinyApp {
       }
     });
 
-    addMessageHandler("custom", (message: { [key: string]: unknown }) => {
+    addMessageHandler("custom", async (message: { [key: string]: unknown }) => {
       // For old-style custom messages - should deprecate and migrate to new
       // method
       const shinyOnCustomMessage = getShinyOnCustomMessage();
 
-      if (shinyOnCustomMessage) shinyOnCustomMessage(message);
+      if (shinyOnCustomMessage) await shinyOnCustomMessage(message);
 
       // Send messages.foo and messages.bar to appropriate handlers
-      this._sendMessagesToHandlers(
+      await this._sendMessagesToHandlers(
         message,
         customMessageHandlers,
         customMessageHandlerOrder

srcts/types/src/bindings/input/inputBinding.d.ts

@@ -8,7 +8,7 @@ declare class InputBinding {
     getValue(el: HTMLElement): any;
     subscribe(el: HTMLElement, callback: (value: boolean) => void): void;
     unsubscribe(el: HTMLElement): void;
-    receiveMessage(el: HTMLElement, data: unknown): void;
+    receiveMessage(el: HTMLElement, data: unknown): Promise<void> | void;
     getState(el: HTMLElement): unknown;
     getRatePolicy(el: HTMLElement): {
         policy: RatePolicyModes;

srcts/types/src/bindings/input/selectInput.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="selectize" />
 import { InputBinding } from "./inputBinding";
-import type { NotUndefined } from "../../utils/extraTypes";
 type SelectHTMLElement = HTMLSelectElement & {
     nonempty: boolean;
 };
@@ -19,7 +18,7 @@ declare class SelectInputBinding extends InputBinding {
     find(scope: HTMLElement): JQuery<HTMLElement>;
     getType(el: HTMLElement): string | null;
     getId(el: SelectHTMLElement): string;
-    getValue(el: HTMLElement): NotUndefined<ReturnType<JQuery<HTMLElement>["val"]>>;
+    getValue(el: SelectHTMLElement): any;
     setValue(el: SelectHTMLElement, value: string): void;
     getState(el: SelectHTMLElement): {
         label: JQuery<HTMLElement>;

srcts/types/src/shiny/bind.d.ts

@@ -21,8 +21,8 @@ declare function bindInputs(shinyCtx: BindInputsCtx, scope?: BindScope): {
         };
     };
 };
-declare function _bindAll(shinyCtx: BindInputsCtx, scope: BindScope): ReturnType<typeof bindInputs>;
+declare function _bindAll(shinyCtx: BindInputsCtx, scope: BindScope): Promise<ReturnType<typeof bindInputs>>;
 declare function unbindAll(shinyCtx: BindInputsCtx, scope: BindScope, includeSelf?: boolean): void;
-declare function bindAll(shinyCtx: BindInputsCtx, scope: BindScope): void;
+declare function bindAll(shinyCtx: BindInputsCtx, scope: BindScope): Promise<void>;
 export { unbindAll, bindAll, _bindAll };
 export type { BindScope, BindInputsCtx };

srcts/types/src/shiny/init.d.ts

@@ -1,3 +1,3 @@
 import type { Shiny } from ".";
-declare function initShiny(windowShiny: Shiny): void;
+declare function initShiny(windowShiny: Shiny): Promise<void>;
 export { initShiny };

srcts/types/src/shiny/initedMethods.d.ts

@@ -11,10 +11,10 @@ declare function shinySetInputValue(name: string, value: unknown, opts?: {
 declare function shinyShinyApp(): ShinyApp;
 declare function setShinyUser(user: string): void;
 declare function shinyForgetLastInputValue(name: string): void;
-declare function shinyBindAll(scope: BindScope): void;
+declare function shinyBindAll(scope: BindScope): Promise<void>;
 declare function shinyUnbindAll(scope: BindScope, includeSelf?: boolean): void;
 declare function shinyInitializeInputs(scope: BindScope): void;
-declare function shinyAppBindOutput(id: string, binding: OutputBindingAdapter): void;
+declare function shinyAppBindOutput(id: string, binding: OutputBindingAdapter): Promise<void>;
 declare function shinyAppUnbindOutput(id: string, binding: OutputBindingAdapter): boolean;
 declare function getShinyOnCustomMessage(): Handler | null;
 declare function getFileInputBinding(): FileInputBinding;

srcts/types/src/shiny/reconnectDialog.d.ts

@@ -1,3 +1,3 @@
-declare function showReconnectDialog(delay: number): void;
+declare function showReconnectDialog(delay: number): Promise<void>;
 declare function hideReconnectDialog(): void;
 export { showReconnectDialog, hideReconnectDialog };

srcts/types/src/shiny/render.d.ts

@@ -8,7 +8,7 @@ declare function renderContentAsync(el: BindScope, content: string | {
 declare function renderContent(el: BindScope, content: string | {
     html: string;
     deps?: HtmlDep[];
-} | null, where?: WherePosition): void;
+} | null, where?: WherePosition): Promise<void>;
 declare function renderHtmlAsync(html: string, el: BindScope, dependencies: HtmlDep[], where?: WherePosition): Promise<ReturnType<typeof singletonsRenderHtml>>;
 declare function renderHtml(html: string, el: BindScope, dependencies: HtmlDep[], where?: WherePosition): ReturnType<typeof singletonsRenderHtml>;
 declare function renderDependenciesAsync(dependencies: HtmlDep[] | null): Promise<void>;

srcts/types/src/shiny/shinyapp.d.ts

@@ -61,13 +61,13 @@ declare class ShinyApp {
         next: () => number;
         reset: () => void;
     };
-    onDisconnected(): void;
+    onDisconnected(reloading?: boolean): void;
     onConnected(): void;
     makeRequest(method: string, args: unknown[], onSuccess: OnSuccessRequest, onError: OnErrorRequest, blobs: Array<ArrayBuffer | Blob | string> | undefined): void;
     $sendMsg(msg: MessageValue): void;
     receiveError(name: string, error: ErrorsMessageValue): void;
     receiveOutput<T>(name: string, value: T): Promise<T | undefined>;
-    bindOutput(id: string, binding: OutputBindingAdapter): OutputBindingAdapter;
+    bindOutput(id: string, binding: OutputBindingAdapter): Promise<OutputBindingAdapter>;
     unbindOutput(id: string, binding: OutputBindingAdapter): boolean;
     private _narrowScopeComponent;
     private _narrowScope;

tests/testthat/test-tabPanel.R

@@ -18,6 +18,9 @@ expect_snapshot2 <- function(...) {
   if (getRversion() < "3.6.0") {
     skip("Skipping snapshots on R < 3.6 because of different RNG method")
   }
+  if (packageVersion("htmltools") <= "0.5.6" && getRversion() > "4.3.1") {
+    skip("Skipping snapshots since htmltools is 'outdated'")
+  }
   expect_snapshot(...)
 }
 

tools/selectize-patches/002-better-sass-defaults.patch

@@ -1,91 +0,0 @@
-diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap3.scss b/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
-index 81d018a8..88d042db 100644
---- a/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
-+++ b/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
-@@ -18,22 +18,23 @@ $selectize-font-family: inherit !default;
- $selectize-font-size: inherit !default;
- $selectize-line-height: $line-height-computed !default;
-
--$selectize-color-text: $text-color !default;
-+$selectize-color-text: $input-color !default;
- $selectize-color-highlight: rgba(255,237,40,0.4) !default;
- $selectize-color-input: $input-bg !default;
- $selectize-color-input-full: $input-bg !default;
- $selectize-color-input-error: $state-danger-text !default;
- $selectize-color-input-error-focus: darken($selectize-color-input-error, 10%) !default;
- $selectize-color-disabled: $input-bg !default;
--$selectize-color-item: #efefef !default;
-+$selectize-color-item: mix($selectize-color-input, $selectize-color-text, 90%) !default;
- $selectize-color-item-border: rgba(black, 0) !default;
- $selectize-color-item-active: $component-active-bg !default;
--$selectize-color-item-active-text: #fff !default;
-+$selectize-color-item-active-text: $component-active-color !default;
- $selectize-color-item-active-border: rgba(black, 0) !default;
- $selectize-color-optgroup: $dropdown-bg !default;
- $selectize-color-optgroup-text: $dropdown-header-color !default;
- $selectize-color-optgroup-border: $dropdown-divider-bg !default;
- $selectize-color-dropdown: $dropdown-bg !default;
-+$selectize-color-dropdown-text: $dropdown-link-color !default;
- $selectize-color-dropdown-border-top: mix($input-border, $input-bg, 0.8) !default;
- $selectize-color-dropdown-item-active: $dropdown-link-hover-bg !default;
- $selectize-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
-@@ -63,12 +64,19 @@ $selectize-arrow-offset: $selectize-padding-x + 5px !default;
-
- @import "selectize";
-
-+//Import Plugins
-+@import "plugins/drag_drop";
-+@import "plugins/dropdown_header";
-+@import "plugins/optgroup_columns";
-+@import "plugins/remove_button";
-+
- .selectize-dropdown, .selectize-dropdown.form-control {
-     height: auto;
-     padding: 0;
-     margin: 2px 0 0 0;
-     z-index: $zindex-dropdown;
-     background: $selectize-color-dropdown;
-+    color: $selectize-color-dropdown-text;
-     border: 1px solid $dropdown-fallback-border;
-     border: 1px solid $dropdown-border;
-     @include selectize-border-radius ($border-radius-base);
-diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
-index 5eca2f3d..c8502847 100644
---- a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
-+++ b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
-@@ -9,22 +9,23 @@ $selectize-font-family: inherit !default;
- $selectize-font-size: inherit !default;
- $selectize-line-height: $input-btn-line-height !default; //formerly line-height-computed
-
--$selectize-color-text: gray("800") !default; //$gray-800
-+$selectize-color-text: $input-color !default;
- $selectize-color-highlight: rgba(255,237,40,0.4) !default;
- $selectize-color-input: $input-bg !default;
- $selectize-color-input-full: $input-bg !default;
- $selectize-color-input-error: theme-color("danger") !default;
- $selectize-color-input-error-focus: darken($selectize-color-input-error, 10%) !default;
- $selectize-color-disabled: $input-bg !default;
--$selectize-color-item: #efefef !default;
--$selectize-color-item-border: #999 !default;
-+$selectize-color-item: mix($selectize-color-input, $selectize-color-text, 90%) !default;
-+$selectize-color-item-border: $input-border-color !default;
- $selectize-color-item-active: $component-active-bg !default;
--$selectize-color-item-active-text: #fff !default;
-+$selectize-color-item-active-text: $component-active-color !default;
- $selectize-color-item-active-border: rgba(0,0,0,0) !default;
- $selectize-color-optgroup: $dropdown-bg !default;
- $selectize-color-optgroup-text: $dropdown-header-color !default;
- $selectize-color-optgroup-border: $dropdown-divider-bg !default;
- $selectize-color-dropdown: $dropdown-bg !default;
-+$selectize-color-dropdown-text: $dropdown-link-color !default;
- $selectize-color-dropdown-border-top: mix($input-border-color, $input-bg, 0.8) !default;
- $selectize-color-dropdown-item-active: $dropdown-link-hover-bg !default;
- $selectize-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
-@@ -67,6 +68,7 @@ $selectize-arrow-offset: calc(#{$selectize-padding-x} + 5px) !default;
-   margin: 2px 0 0 0;
-   z-index: $zindex-dropdown;
-   background: $selectize-color-dropdown;
-+  color: $selectize-color-dropdown-text;
-   border: 1px solid $dropdown-border-color; //$dropdown-fallback-border
-   @include selectize-border-radius($border-radius);
-   @include selectize-box-shadow(0 6px 12px rgba(0,0,0,.175));

tools/selectize-patches/002-fix-sass-compile-errors.patch

@@ -0,0 +1,39 @@
+diff --git a/inst/www/shared/selectize/scss/plugins/auto_position.scss b/inst/www/shared/selectize/scss/plugins/auto_position.scss
+index 89c5cf008..01bd45cf6 100644
+--- a/inst/www/shared/selectize/scss/plugins/auto_position.scss
++++ b/inst/www/shared/selectize/scss/plugins/auto_position.scss
+@@ -2,7 +2,7 @@
+   border-top: 1px solid $select-color-border;
+   border-bottom: 0 none;
+   border-radius: 3px 3px 0 0;
+-  box-shadow: 0 -6px 12px rgb(0 0 0 / 18%);
++  box-shadow: 0 -6px 12px rgba(var(--bs-body-color-rgb, 0,0,0), .18);
+ }
+ 
+ .#{selectize}-control.plugin-auto_position .#{selectize}-input.#{$selectize}-position-top.dropdown-active {
+diff --git a/inst/www/shared/selectize/scss/plugins/clear_button.scss b/inst/www/shared/selectize/scss/plugins/clear_button.scss
+index 4f0d1d815..566ffd281 100644
+--- a/inst/www/shared/selectize/scss/plugins/clear_button.scss
++++ b/inst/www/shared/selectize/scss/plugins/clear_button.scss
+@@ -7,7 +7,7 @@
+         width: 25px;
+         top: 0;
+         right: calc(#{$select-padding-x} - #{$select-padding-item-x});
+-        color: rgba(0, 0, 0);
++        color: var(--bs-body-color, black);
+         opacity: 0.4;
+         font-weight: bold;
+         border: none;
+diff --git a/inst/www/shared/selectize/scss/selectize.scss b/inst/www/shared/selectize/scss/selectize.scss
+index aec43bb43..30619ba9b 100644
+--- a/inst/www/shared/selectize/scss/selectize.scss
++++ b/inst/www/shared/selectize/scss/selectize.scss
+@@ -346,7 +346,7 @@ $select-spinner-border-color: $select-color-border;
+     position: absolute;
+     top: 50%;
+     right: $select-arrow-offset;
+-    margin-top: round(math.div(-1 * $select-arrow-size, 2));
++    margin-top: round(divide(-1 * $select-arrow-size, 2));
+     width: 0;
+     height: 0;
+     border-style: solid;

tools/selectize-patches/003-border-radius-mixin.patch

@@ -1,19 +0,0 @@
-diff --git a/inst/www/shared/selectize/scss/selectize.scss b/inst/www/shared/selectize/scss/selectize.scss
-index 240e3895..c20f529c 100644
---- a/inst/www/shared/selectize/scss/selectize.scss
-+++ b/inst/www/shared/selectize/scss/selectize.scss
-@@ -57,9 +57,11 @@ $selectize-caret-margin: 0 2px 0 0 !default;
- $selectize-caret-margin-rtl: 0 4px 0 -2px !default;
- 
- @mixin selectize-border-radius($radii){
--  -webkit-border-radius: $radii;
--  -moz-border-radius: $radii;
--  border-radius: $radii;
-+  @if mixin-exists("border-radius") {
-+    @include border-radius($radii)
-+  } @else {
-+    border-radius: $radii;
-+  }
- }
- @mixin selectize-unselectable(){
-   -webkit-user-select: none;

tools/selectize-patches/003-color-contrast-active-text.patch

@@ -0,0 +1,39 @@
+diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap3.scss b/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
+index 9f5ea2aea..cd4e21777 100644
+--- a/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
++++ b/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
+@@ -13,7 +13,7 @@ $select-color-disabled: $input-bg;
+ $select-color-item: #efefef;
+ $select-color-item-border: rgba(0, 0, 0, 0);
+ $select-color-item-active: $component-active-bg;
+-$select-color-item-active-text: #fff;
++$select-color-item-active-text: color-contrast($select-color-item-active);
+ $select-color-item-active-border: rgba(0, 0, 0, 0);
+ $select-color-optgroup: $dropdown-bg;
+ $select-color-optgroup-text: $dropdown-header-color;
+diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
+index 6518010b6..b8c35f14b 100644
+--- a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
++++ b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
+@@ -17,7 +17,7 @@ $select-color-disabled: $input-bg !default;
+ $select-color-item: #efefef !default;
+ $select-color-item-border: $border-color !default;
+ $select-color-item-active: $component-active-bg !default;
+-$select-color-item-active-text: #fff !default;
++$select-color-item-active-text: color-contrast($select-color-item-active) !default;
+ $select-color-item-active-border: rgba(0, 0, 0, 0) !default;
+ $select-color-optgroup: $dropdown-bg !default;
+ $select-color-optgroup-text: $dropdown-header-color !default;
+diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap5.scss b/inst/www/shared/selectize/scss/selectize.bootstrap5.scss
+index c2f09fffc..4d991532d 100644
+--- a/inst/www/shared/selectize/scss/selectize.bootstrap5.scss
++++ b/inst/www/shared/selectize/scss/selectize.bootstrap5.scss
+@@ -17,7 +17,7 @@ $select-color-disabled: $input-bg !default;
+ $select-color-item: #efefef !default;
+ $select-color-item-border: $border-color !default;
+ $select-color-item-active: $component-active-bg !default;
+-$select-color-item-active-text: #fff !default;
++$select-color-item-active-text: color-contrast($select-color-item-active) !default;
+ $select-color-item-active-border: rgba(0, 0, 0, 0) !default;
+ $select-color-optgroup: $dropdown-bg !default;
+ $select-color-optgroup-text: $dropdown-header-color !default;

tools/selectize-patches/004-better-color-contrast.patch

@@ -1,26 +0,0 @@
-diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap3.scss b/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
-index 9f6c0398..2eb30361 100644
---- a/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
-+++ b/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
-@@ -28,7 +28,7 @@ $selectize-color-disabled: $input-bg !default;
- $selectize-color-item: mix($selectize-color-input, $selectize-color-text, 90%) !default;
- $selectize-color-item-border: rgba(black, 0) !default;
- $selectize-color-item-active: $component-active-bg !default;
--$selectize-color-item-active-text: $component-active-color !default;
-+$selectize-color-item-active-text: color-contrast($selectize-color-item-active) !default;
- $selectize-color-item-active-border: rgba(black, 0) !default;
- $selectize-color-optgroup: $dropdown-bg !default;
- $selectize-color-optgroup-text: $dropdown-header-color !default;
-diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
-index 44dae201..689b38ef 100644
---- a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
-+++ b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
-@@ -19,7 +19,7 @@ $selectize-color-disabled: $input-bg !default;
- $selectize-color-item: mix($selectize-color-input, $selectize-color-text, 90%) !default;
- $selectize-color-item-border: $input-border-color !default;
- $selectize-color-item-active: $component-active-bg !default;
--$selectize-color-item-active-text: $component-active-color !default;
-+$selectize-color-item-active-text: color-contrast($selectize-color-item-active) !default;
- $selectize-color-item-active-border: rgba(0,0,0,0) !default;
- $selectize-color-optgroup: $dropdown-bg !default;
- $selectize-color-optgroup-text: $dropdown-header-color !default;

tools/selectize-patches/004-theming-friendly-defaults.patch

@@ -0,0 +1,26 @@
+diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap3.scss b/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
+index 7f847b39b..8bd94d42a 100644
+--- a/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
++++ b/inst/www/shared/selectize/scss/selectize.bootstrap3.scss
+@@ -10,7 +10,7 @@ $select-color-input-full: $input-bg;
+ $select-color-input-error: $state-danger-text;
+ $select-color-input-error-focus: darken($select-color-input-error, 10%);
+ $select-color-disabled: $input-bg;
+-$select-color-item: #efefef;
++$select-color-item: RGBA($select-color-text, 0.1);
+ $select-color-item-border: rgba(0, 0, 0, 0);
+ $select-color-item-active: $component-active-bg;
+ $select-color-item-active-text: color-contrast($select-color-item-active);
+diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
+index a797a62da..624ab9138 100644
+--- a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
++++ b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
+@@ -14,7 +14,7 @@ $select-color-input-error-focus: darken(
+   10%
+ ) !default;
+ $select-color-disabled: $input-bg !default;
+-$select-color-item: #efefef !default;
++$select-color-item: RGBA($select-color-text, 0.1) !default;
+ $select-color-item-border: $border-color !default;
+ $select-color-item-active: $component-active-bg !default;
+ $select-color-item-active-text: color-contrast($select-color-item-active) !default;

tools/selectize-patches/005-bs5-font-styling.patch

@@ -0,0 +1,14 @@
+diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap5.scss b/inst/www/shared/selectize/scss/selectize.bootstrap5.scss
+index 4d991532d..bf15610d8 100644
+--- a/inst/www/shared/selectize/scss/selectize.bootstrap5.scss
++++ b/inst/www/shared/selectize/scss/selectize.bootstrap5.scss
+@@ -1,7 +1,7 @@
+ 
+ $enable-shadows: true !default;
+-$select-font-family: inherit !default;
+-$select-font-size: inherit !default;
++$select-font-family: if($input-btn-font-family, $input-btn-font-family, inherit) !default;
++$select-font-size: $input-btn-font-size !default;
+ $select-line-height: $input-btn-line-height !default; //formerly line-height-computed
+ 
+ $select-color-text: $gray-800 !default; //$gray-800

tools/selectize-patches/005-bs5-support.patch

@@ -1,13 +0,0 @@
-diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
-index 44dae201..03b4f491 100644
---- a/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
-+++ b/inst/www/shared/selectize/scss/selectize.bootstrap4.scss
-@@ -13,7 +13,7 @@ $selectize-color-text: $input-color !default;
- $selectize-color-highlight: rgba(255,237,40,0.4) !default;
- $selectize-color-input: $input-bg !default;
- $selectize-color-input-full: $input-bg !default;
--$selectize-color-input-error: theme-color("danger") !default;
-+$selectize-color-input-error: $danger !default;
- $selectize-color-input-error-focus: darken($selectize-color-input-error, 10%) !default;
- $selectize-color-disabled: $input-bg !default;
- $selectize-color-item: mix($selectize-color-input, $selectize-color-text, 90%) !default;

tools/selectize-patches/006-bs5-dark-mode-support.patch

@@ -0,0 +1,112 @@
+diff --git a/inst/www/shared/selectize/scss/plugins/dropdown_header.scss b/inst/www/shared/selectize/scss/plugins/dropdown_header.scss
+index 90846cd12..c60d9f326 100644
+--- a/inst/www/shared/selectize/scss/plugins/dropdown_header.scss
++++ b/inst/www/shared/selectize/scss/plugins/dropdown_header.scss
+@@ -4,7 +4,7 @@
+     padding: ($select-padding-dropdown-item-y * 2)
+       $select-padding-dropdown-item-x;
+     border-bottom: 1px solid $select-color-border;
+-    background: mix($select-color-dropdown, $select-color-border, 85%);
++    background: RGBA($select-color-dropdown, 0.15);
+     border-radius: $select-border-radius $select-border-radius 0 0;
+   }
+   .#{$selectize}-dropdown-header-close {
+@@ -19,6 +19,6 @@
+     text-decoration: none;
+   }
+   .#{$selectize}-dropdown-header-close:hover {
+-    color: darken($select-color-text, 25%);
++    color: RGB($select-color-rgb);
+   }
+ }
+diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap5.scss b/inst/www/shared/selectize/scss/selectize.bootstrap5.scss
+index 4d991532d..39b27a81e 100644
+--- a/inst/www/shared/selectize/scss/selectize.bootstrap5.scss
++++ b/inst/www/shared/selectize/scss/selectize.bootstrap5.scss
+@@ -23,11 +23,7 @@ $select-color-optgroup: $dropdown-bg !default;
+ $select-color-optgroup-text: $dropdown-header-color !default;
+ $select-color-optgroup-border: $dropdown-divider-bg !default;
+ $select-color-dropdown: $dropdown-bg !default;
+-$select-color-dropdown-border-top: mix(
+-  $input-border-color,
+-  $input-bg,
+-  80%
+-) !default;
++$select-color-dropdown-border-top: rgba($input-border-color, 0.8) !default;
+ $select-color-dropdown-item-active: $dropdown-link-hover-bg !default;
+ $select-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
+ $select-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
+diff --git a/inst/www/shared/selectize/scss/selectize.bootstrap5.scss b/inst/www/shared/selectize/scss/selectize.bootstrap5.scss
+index 44fff4ae4..8364d3123 100644
+--- a/inst/www/shared/selectize/scss/selectize.bootstrap5.scss
++++ b/inst/www/shared/selectize/scss/selectize.bootstrap5.scss
+@@ -4,7 +4,8 @@ $select-font-family: if($input-btn-font-family, $input-btn-font-family, inherit) !default;
+ $select-font-size: $input-btn-font-size !default;
+ $select-line-height: $input-btn-line-height !default; //formerly line-height-computed
+ 
+-$select-color-text: $gray-800 !default; //$gray-800
++$select-color-rgb: var(--bs-emphasis-color-rgb, 0, 0, 0) !default;
++$select-color-text: RGBA($select-color-rgb, 0.83) !default;
+ $select-color-highlight: rgba(255, 237, 40, 0.4) !default;
+ $select-color-input: $input-bg !default;
+ $select-color-input-full: $input-bg !default;
+@@ -14,7 +15,7 @@ $select-color-input-error-focus: darken(
+   10%
+ ) !default;
+ $select-color-disabled: $input-bg !default;
+-$select-color-item: #efefef !default;
++$select-color-item: RGBA($select-color-rgb, 0.05) !default;
+ $select-color-item-border: $border-color !default;
+ $select-color-item-active: $component-active-bg !default;
+ $select-color-item-active-text: color-contrast($select-color-item-active) !default;
+diff --git a/inst/www/shared/selectize/scss/selectize.scss b/inst/www/shared/selectize/scss/selectize.scss
+index 321c8802b..53d09878b 100644
+--- a/inst/www/shared/selectize/scss/selectize.scss
++++ b/inst/www/shared/selectize/scss/selectize.scss
+@@ -7,7 +7,8 @@ $select-font-smoothing: inherit !default;
+ $select-font-size: 13px !default;
+ $select-line-height: 18px !default;
+ 
+-$select-color-text: #303030 !default;
++$select-color-rgb: 0,0,0 !default;
++$select-color-text: RGBA($select-color-rgb, 0.83) !default;
+ $select-color-border: #d0d0d0 !default;
+ $select-color-highlight: rgba(125, 168, 208, 0.2) !default;
+ $select-color-input: #fff !default;
+@@ -24,12 +25,7 @@ $select-color-dropdown-border: $select-color-border !default;
+ $select-color-dropdown-border-top: #f0f0f0 !default;
+ $select-color-dropdown-item-active: #f5fafd !default;
+ $select-color-dropdown-item-active-text: #495c68 !default;
+-$select-color-dropdown-item-create-text: rgba(
+-  red($select-color-text),
+-  green($select-color-text),
+-  blue($select-color-text),
+-  0.5
+-) !default;
++$select-color-dropdown-item-create-text: RGBA($select-color-rgb, 0.5) !default;
+ $select-color-dropdown-item-create-active-text: $select-color-dropdown-item-active-text !default;
+ $select-color-optgroup: $select-color-dropdown !default;
+ $select-color-optgroup-text: $select-color-text !default;
+@@ -161,19 +157,10 @@ $select-spinner-border-color: $select-color-border;
+   .#{$selectize}-control.multi &.disabled > div {
+     &,
+     &.active {
+-      color: lighten(
+-        desaturate($select-color-item-text, 100%),
+-        $select-lighten-disabled-item-text
+-      );
+-      background: lighten(
+-        desaturate($select-color-item, 100%),
+-        $select-lighten-disabled-item
+-      );
++      color: lighten(gray, $select-lighten-disabled-item-text);
++      background: lighten(gray, $select-lighten-disabled-item);
+       border: $select-width-item-border solid
+-        lighten(
+-          desaturate($select-color-item-border, 100%),
+-          $select-lighten-disabled-item-border
+-        );
++        lighten(gray, $select-lighten-disabled-item-border);
+     }
+   }
+   > input {

tools/selectize-patches/007-selectize-event-namespace-bugfix.patch

@@ -0,0 +1,25 @@
+diff --git a/inst/www/shared/selectize/js/selectize.js b/inst/www/shared/selectize/js/selectize.js
+index 0b447a7b3..cbfe9178e 100644
+--- a/inst/www/shared/selectize/js/selectize.js
++++ b/inst/www/shared/selectize/js/selectize.js
+@@ -834,6 +834,9 @@ var Selectize = function($input, settings) {
+ 
+   self.settings = {};
+ 
++	// increase the count of 'active' (i.e., non-destroyed) selectize instances
++	++Selectize.count;
++
+ 	$.extend(self, {
+ 		order            : 0,
+ 		settings         : settings,
+@@ -841,8 +844,8 @@ var Selectize = function($input, settings) {
+ 		tabIndex         : $input.attr('tabindex') || '',
+ 		tagType          : input.tagName.toLowerCase() === 'select' ? TAG_SELECT : TAG_INPUT,
+ 		rtl              : /rtl/i.test(dir),
+-
+-		eventNS          : '.selectize' + (++Selectize.count),
++		// generate a unique ID for the event namespace
++		eventNS          : '.selectize-' + (new Date().getTime()) + '-' + (Math.random().toString(36).substr(2, 5)),
+ 		highlightedValue : null,
+ 		isBlurring       : false,
+ 		isOpen           : false,

tools/selectize-patches/008-selectize-revert-d2564a0a.patch

@@ -0,0 +1,32 @@
+diff --git a/inst/www/shared/selectize/js/selectize.js b/inst/www/shared/selectize/js/selectize.js
+index 767f45e1c..a902fae5b 100644
+--- a/inst/www/shared/selectize/js/selectize.js
++++ b/inst/www/shared/selectize/js/selectize.js
+@@ -1064,14 +1064,8 @@ $.extend(Selectize.prototype, {
+       self.ignoreHover = self.settings.ignoreHover;
+ 		});
+ 
+-    var inputPlaceholder = $('<div></div>');
+-		var inputChildren = $input.children().detach();
+-
+-    $input.replaceWith(inputPlaceholder);
+-    inputPlaceholder.replaceWith($input);
+-
+     this.revertSettings = {
+-			$children : inputChildren,
++			$children : $input.children().detach(),
+ 			tabindex  : $input.attr('tabindex')
+ 		};
+ 
+diff --git a/inst/www/shared/shiny.js b/inst/www/shared/shiny.js
+index aeff68aa3..db9880f26 100644
+Binary files a/inst/www/shared/shiny.js and b/inst/www/shared/shiny.js differ
+diff --git a/inst/www/shared/shiny.js.map b/inst/www/shared/shiny.js.map
+index 34350b024..1abf54644 100644
+Binary files a/inst/www/shared/shiny.js.map and b/inst/www/shared/shiny.js.map differ
+diff --git a/inst/www/shared/shiny.min.js b/inst/www/shared/shiny.min.js
+index 8b8027fd3..eb1994aac 100644
+Binary files a/inst/www/shared/shiny.min.js and b/inst/www/shared/shiny.min.js differ
+diff --git a/inst/www/shared/shiny.min.js.map b/inst/www/shared/shiny.min.js.map
+index 560e1492e..0de12987b 100644
+Binary files a/inst/www/shared/shiny.min.js.map and b/inst/www/shared/shiny.min.js.map differ

tools/selectize-patches/009-selectize-selectOnTab-false.patch

@@ -0,0 +1,13 @@
+diff --git a/inst/www/shared/selectize/js/selectize.js b/inst/www/shared/selectize/js/selectize.js
+index a902fae5b..5fa6dccaf 100644
+--- a/inst/www/shared/selectize/js/selectize.js
++++ b/inst/www/shared/selectize/js/selectize.js
+@@ -2757,7 +2757,7 @@ Selectize.defaults = {
+   maxItems: null,
+   hideSelected: null,
+   addPrecedence: false,
+-  selectOnTab: true,
++  selectOnTab: false,
+   preload: false,
+   allowEmptyOption: false,
+   showEmptyOptionInDropdown: false,

tools/updateSelectize.R

@@ -1,38 +1,59 @@
 #!/usr/bin/env Rscript
 library(rprojroot)
+library(withr)
 
-## -----------------------------------------------------------------
-## First, download the main selectize.js and css
-## -----------------------------------------------------------------
 
-version <- "0.12.4"
-types_version <- "0.12.34"
+if (!identical(getwd(), find_package_root_file())) {
+  stop("This script must be run from the top directory of the shiny package")
+}
 
-dest_dir <- find_package_root_file("inst/www/shared/selectize")
-tag <- paste0("v", version)
-dest_file <- file.path(tempdir(), paste0("selectize.js-", version, ".zip"))
-url <- sprintf("https://github.com/selectize/selectize.js/archive/%s.zip", tag)
+if (Sys.which("yarn") == "") {
+  stop("The yarn CLI must be installed and in your PATH")
+}
 
-download.file(url, dest_file)
-unzipped <- tempdir()
-unzip(dest_file, exdir = unzipped)
+system("yarn install")
 
-unlink(dest_dir, recursive = TRUE)
+node_dir <- find_package_root_file("node_modules/@selectize/selectize/dist")
+inst_dir <- find_package_root_file("inst/www/shared/selectize")
 
-dir.create(file.path(dest_dir, "js"), recursive = TRUE)
+unlink(inst_dir, recursive = TRUE)
+
+dir.create(file.path(inst_dir, "js"), recursive = TRUE)
 file.copy(
-  file.path(unzipped, paste0("selectize.js-", version), "dist", "js", "standalone", "selectize.min.js"),
-  file.path(dest_dir, "js"),
+  file.path(node_dir, "js", c("selectize.js", "selectize.min.js")),
+  file.path(inst_dir, "js"),
   overwrite = TRUE
 )
 
-dir.create(file.path(dest_dir, "css"), recursive = TRUE)
+dir.create(file.path(inst_dir, "css"), recursive = TRUE)
 file.copy(
-  file.path(unzipped, paste0("selectize.js-", version), "dist", "css", "selectize.bootstrap3.css"),
-  file.path(dest_dir, "css"),
+  file.path(node_dir, "css", "selectize.bootstrap3.css"),
+  file.path(inst_dir, "css"),
   overwrite = TRUE
 )
 
+dir.create(file.path(inst_dir, "scss"), recursive = TRUE)
+file.copy(
+  file.path(node_dir, "scss"),
+  inst_dir,
+  overwrite = TRUE,
+  recursive = TRUE
+)
+
+
+sanitize_scss <- function(f) {
+  txt <- readLines(f)
+  # Remove the unnecessary imports of Bootstrap from scss files
+  txt <- txt[!grepl('@import\\s+"lib/bootstrap', txt)]
+  writeLines(txt, f)
+}
+
+lapply(
+  dir(file.path(inst_dir, "scss"), full.names = TRUE, recursive = TRUE),
+  sanitize_scss
+)
+
+
 ## -----------------------------------------------------------------
 ## Second, download accessibility plugin
 ## -----------------------------------------------------------------
@@ -45,69 +66,13 @@ download.file(url, dest_file)
 unzipped <- tempdir()
 unzip(dest_file, exdir = unzipped)
 
-dir.create(file.path(dest_dir, "accessibility", "js"), recursive = TRUE)
+dir.create(file.path(inst_dir, "accessibility", "js"), recursive = TRUE)
 file.copy(
   file.path(unzipped, paste0("selectize-plugin-a11y-", ally_version), "selectize-plugin-a11y.js"),
-  file.path(dest_dir, "accessibility", "js"),
+  file.path(inst_dir, "accessibility", "js"),
   overwrite = TRUE
 )
 
-tmpdir <- tempdir()
-
-## -----------------------------------------------------------------
-## Third, download Bootstrap 4 SASS port of selectize less
-## This is using a specific sha because this hasn't been included in an official release
-## https://github.com/papakay/selectize-bootstrap-4-style/pull/19
-## -----------------------------------------------------------------
-
-bs4_sass_version <- "5013be4e97a14bef47bc8badcc78e6762815ef38"
-zip_src <- sprintf("https://github.com/papakay/selectize-bootstrap-4-style/archive/%s.zip", bs4_sass_version)
-zip_target <- file.path(tmpdir, "select-bs4.zip")
-download.file(zip_src, zip_target)
-unzip(zip_target, exdir = dirname(zip_target))
-target <- find_package_root_file("inst/www/shared/selectize/scss")
-unlink(target, recursive = TRUE)
-dir.create(target)
-file.rename(
-  file.path(tmpdir, sprintf("selectize-bootstrap-4-style-%s/src/selectize", bs4_sass_version)),
-  target
-)
-
-# Remove the unnecessary imports of Bootstrap
-scss_file <- find_package_root_file("inst/www/shared/selectize/scss/selectize.bootstrap4.scss")
-scss <- readLines(scss_file)
-scss <- scss[!grepl('@import\\s+"\\.\\./bootstrap', scss)]
-writeLines(scss, scss_file)
-
-# Support Bootstrap 5 as well
-# https://github.com/selectize/selectize.js/issues/1584
-writeLines(
-  c(
-    "$input-line-height-sm: $form-select-line-height !default;",
-    "@import 'selectize.bootstrap4';",
-    ".selectize-control{padding:0;}"
-  ),
-  file.path(target, "selectize.bootstrap5.scss")
-)
-
-## -----------------------------------------------------------------
-## Fourth, download Bootstrap 3 SASS port
-## https://github.com/herschel666/selectize-scss
-## Note that the base selectize.scss, as well as the plugins, are identical
-## to the BS4 port, so we only need the selectize.bootstrap3.scss file
-## -----------------------------------------------------------------
-
-bs3_sass_version <- "0.10.1"
-zip_src <- sprintf("https://github.com/herschel666/selectize-scss/archive/v%s.zip", bs3_sass_version)
-zip_target <- file.path(tmpdir, "select-bs3.zip")
-download.file(zip_src, zip_target)
-unzip(zip_target, exdir = dirname(zip_target))
-target <- find_package_root_file("inst/www/shared/selectize/scss/selectize.bootstrap3.scss")
-file.rename(
-  file.path(tmpdir, sprintf("selectize-scss-%s/src/selectize.bootstrap3.scss", bs3_sass_version)),
-  target
-)
-
 
 # =============================================================================
 # Apply patches
@@ -122,7 +87,7 @@ for (patch in list.files(patch_dir, full.names = TRUE)) {
   tryCatch(
     {
       message(sprintf("Applying %s", basename(patch)))
-      withr::with_dir(find_package_root_file(), system(sprintf("git apply %s", patch)))
+      with_dir(find_package_root_file(), system(sprintf("git apply %s --reject", patch)))
     },
     error = function(e) {
       quit(save = "no", status = 1)
@@ -133,27 +98,17 @@ for (patch in list.files(patch_dir, full.names = TRUE)) {
 # =============================================================================
 # Add versions to files
 # =============================================================================
+pkg_json <- jsonlite::fromJSON(file.path(node_dir, "../package.json"))
 writeLines(
   c(
     "# Generated by tools/updateSelectize.R; do not edit by hand",
-    sprintf('version_selectize <- "%s"', version)
+    sprintf('version_selectize <- "%s"', pkg_json$version)
   ),
-  rprojroot::find_package_root_file("R", "version_selectize.R")
+  find_package_root_file("R", "version_selectize.R")
 )
 
-# Update TypeScript installation
-withr::with_dir(
-  rprojroot::find_package_root_file(),
-  {
-    exit_code <- system(paste0("yarn add --dev selectize@", version))
-    if (exit_code != 0) stop("yarn could not install selectize")
-
-    exit_code <- system(paste0("yarn add @types/selectize@", types_version))
-    if (exit_code != 0) stop("yarn could not install @types/selectize")
-  }
-)
 
 # =============================================================================
 # Generate minified js
 # =============================================================================
-withr::with_dir(find_package_root_file("srcts"), system("yarn build"))
+with_dir(find_package_root_file("srcts"), system("yarn build"))

yarn.lock

@@ -1828,6 +1828,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@selectize/selectize@https://github.com/selectize/selectize.js.git#e3f2e0b4aa251375bc21b5fcd8ca7d374a921f08":
+  version: 0.15.2
+  resolution: "@selectize/selectize@https://github.com/selectize/selectize.js.git#commit=e3f2e0b4aa251375bc21b5fcd8ca7d374a921f08"
+  peerDependencies:
+    jquery: ^1.7.0 || ^2 || ^3
+    jquery-ui: ^1.13.2
+  peerDependenciesMeta:
+    jquery-ui:
+      optional: true
+  checksum: ba260ba5804c16b1455ff79f9d00ce860e12ae36e29d7a5f702da6b384c9454497421b8e06fe683d10fac53e2dc6ec008da4fa129a153cbbfe5396e027eb4247
+  languageName: node
+  linkType: hard
+
 "@sinclair/typebox@npm:^0.25.16":
   version: 0.25.24
   resolution: "@sinclair/typebox@npm:0.25.24"
@@ -2184,6 +2197,7 @@ __metadata:
     "@babel/preset-typescript": ^7.13.0
     "@babel/runtime": ^7.14.0
     "@deanc/esbuild-plugin-postcss": ^1.0.2
+    "@selectize/selectize": "https://github.com/selectize/selectize.js.git#e3f2e0b4aa251375bc21b5fcd8ca7d374a921f08"
     "@testing-library/dom": ^7.31.0
     "@testing-library/jest-dom": ^5.12.0
     "@testing-library/user-event": ^13.1.9