Use the most recent selectize commit

.Rbuildignore

@@ -21,19 +21,3 @@
 ^TODO-promises.md$
 ^manualtests$
 ^\.github$
-
-^\.yarn$
-^\.vscode$
-^\.madgerc$
-^\.prettierrc\.yml$
-^babel\.config\.json$
-^jest\.config\.js$
-^package\.json$
-^tsconfig\.json$
-^yarn\.lock$
-^node_modules$
-^coverage$
-^.ignore$
-^\.browserslistrc$
-^\.eslintrc\.yml$
-^\.yarnrc\.yml$

.github/workflows/rituals.yaml

@@ -129,32 +129,22 @@ jobs:
           tree src
           yarn install --immutable && yarn build
           git add ./src && git commit -m 'yarn lint (GitHub Actions)' || echo "No yarn lint changes to commit"
-          git add ./types && git commit -m 'yarn tsc (GitHub Actions)' || echo "No type definition changes to commit"
           git add ../inst && git commit -m 'yarn build (GitHub Actions)' || echo "No yarn build changes to commit"
-          if [ -n "$(git status --porcelain)" ]
-          then
-            git status --porcelain
-            >&2 echo "The above files changed when we built the JavaScript assets."
-            exit 1
-          else
-            echo "No difference detected; TypeScript build is current."
-          fi
+
+      - name: Check JS build is latest
+        run: |
+          ./tools/checkJSCurrent.sh
+
 
       - name: Git Push (PR)
         uses: r-lib/actions/pr-push@master
         if: github.event_name == 'pull_request'
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-      - name: Verify no un-pushed commits (MASTER)
+      - name: Git Push (MASTER)
         if: github.event_name == 'push'
         run: |
-          # Can't push to a protected branch
-          if [ -z "`git cherry`"]; then
-            echo "Un-pushed commits:"
-            git cherry -v
-            echo "\nCan not push to a protected branch. Exiting"
-            exit 1
-          fi
+          git push https://${{github.actor}}:${{secrets.GITHUB_TOKEN}}@github.com/${{github.repository}}.git HEAD:${{ github.ref }} || echo "No changes to push"
 
       # Execute after pushing, as no updated files will be produced
       - name: Test TypeScript code

.gitignore

@@ -11,18 +11,5 @@ README.html
 .*.Rnb.cached
 tools/yarn-error.log
 
-# TypeScript / yarn
-node_modules/
-.cache
-.yarn/*
-!.yarn/releases
-!.yarn/plugins
-!.yarn/sdks
-!.yarn/versions
-.pnp.*
-coverage/
-madge.svg
-
-
 # GHA remotes installation
 .github/r-depends.rds

.madgerc

@@ -1,7 +0,0 @@
-{
-  "detectiveOptions": {
-    "ts": {
-      "skipTypeImports": true
-    }
-  }
-}

DESCRIPTION

@@ -1,7 +1,7 @@
 Package: shiny
 Type: Package
 Title: Web Application Framework for R
-Version: 1.6.0.9021
+Version: 1.6.0.9000
 Authors@R: c(
     person("Winston", "Chang", role = c("aut", "cre"), email = "winston@rstudio.com", comment = c(ORCID = "0000-0002-1576-2126")),
     person("Joe", "Cheng", role = "aut", email = "joe@rstudio.com"),
@@ -91,7 +91,7 @@ Imports:
     withr,
     commonmark (>= 1.7),
     glue (>= 1.3.2),
-    bslib (>= 0.2.5.9002),
+    bslib (>= 0.2.4.9003),
     cachem,
     ellipsis,
     lifecycle (>= 0.2.0)
@@ -199,11 +199,7 @@ Collate:
     'test.R'
     'update-input.R'
     'utils-lang.R'
-    'version_bs_date_picker.R'
-    'version_ion_range_slider.R'
     'version_jquery.R'
-    'version_selectize.R'
-    'version_strftime.R'
     'viewer.R'
 RoxygenNote: 7.1.1
 Encoding: UTF-8

NEWS.md

@@ -9,19 +9,17 @@ shiny 1.6.0.9000
 
 ### New features and improvements
 
-* Bootstrap 5 support. (#3410 and rstudio/bslib#304)
-  * As explained [here](https://rstudio.github.io/bslib/index.html#basic-usage), to opt-in to Bootstrap 5, provide `bslib::bs_theme(version = 5)` to a page layout function with a `theme` argument (e.g., `fluidPage()`, `navbarPage()`, etc).
-
-* Closed #3322, #3313, #1823, #3321, #3320, #1928, and #2310: Various improvements to `navbarPage()`, `tabsetPanel()`, `tabPanel()`, `navbarMenu()`, etc. Also, these functions are now powered by the `{bslib}` package's new `nav()` API (consider using `{bslib}`'s API to create better looking and more fully featured navs). (#3388)
-
 * All uses of `list(...)` have been replaced with `rlang::list2(...)`. This means that you can use trailing `,` without error and use rlang's `!!!` operator to "splice" a list of argument values into `...`. We think this'll be particularly useful for passing a list of `tabPanel()` to their consumers (i.e., `tabsetPanel()`, `navbarPage()`, etc). For example, `tabs <- list(tabPanel("A", "a"), tabPanel("B", "b")); navbarPage(!!!tabs)`. (#3315 and #3328)
+
+* Numerous improvements tabset panels (i.e., `tabPanel()`, `navbarMenu()`, `tabsetPanel()`, `navbarPage()`, etc) (#3315):
+  * Closed #3322: `tabsetPanel()` and `navlistPanel()` gain `header`/`footer` arguments (inspired by `navbarPage()`'s already existing `header`/`footer`), making it easier to include content that should appear on every tab.
+  * Closed #3313 and #1823: More informative error when non-`tabPanel()`/`shiny.tag` objects are supplied to `...`.
+  * Closed #3321: New informative warning when `shiny.tag` object(s) are supplied to `...`. In this case we will continue to create an "empty" nav item and include the content on every tab, but the warning will mention the (new) `header`/`footer` args, which is likely what the user wants.
+  * Closed #3320: The HTML markup that `tabPanel()` et. al generate (for Bootstrap nav) is now Bootstrap 4+ compliant when used with `theme = bslib::bs_theme()`.
+  * Closed #1928: `NULL` values are now dropped instead of producing an empty nav item.
   
 * `icon(lib="fontawesome")` is now powered by the `{fontawesome}` package, which will make it easier to use the latest FA icons in the future (by updating the `{fontawesome}` package). (#3302)
 
-* Closed #3397: `renderPlot()` new uses `ggplot2::get_alt_text()` to inform an `alt` text default (for `{ggplot2}` plots). (#3398)
-
-* `modalDialog()` gains support for `size = "xl"`. (#3410)
-
 ### Other improvements
 
 * Shiny's core JavaScript code was converted to TypeScript. For the latest development information, please see the [README.md in `./srcts`](https://github.com/rstudio/shiny/tree/master/srcts). (#3296)

R/bootstrap.R

@@ -380,10 +380,8 @@ collapseSizes <- function(padding) {
 #'   (useful for viewing on smaller touchscreen device)
 #' @param fluid `TRUE` to use a fluid layout. `FALSE` to use a fixed
 #'   layout.
-#' @param windowTitle the browser window title (as a character string). The
-#'   default value, `NA`, means to use any character strings that appear in
-#'   `title` (if none are found, the host URL of the page is displayed by
-#'   default).
+#' @param windowTitle The title that should be displayed by the browser window.
+#'   Useful if `title` is not a string.
 #' @inheritParams bootstrapPage
 #' @param icon Optional icon to appear on a `navbarMenu` tab.
 #'
@@ -427,18 +425,70 @@ navbarPage <- function(title,
                        collapsible = FALSE,
                        fluid = TRUE,
                        theme = NULL,
-                       windowTitle = NA,
+                       windowTitle = title,
                        lang = NULL) {
-  remove_first_class(bslib::page_navbar(
-    ..., title = title, id = id, selected = selected,
-    position = match.arg(position),
-    header = header, footer = footer,
-    inverse = inverse, collapsible = collapsible,
-    fluid = fluid,
+
+  # alias title so we can avoid conflicts w/ title in withTags
+  pageTitle <- title
+
+  # navbar class based on options
+  # TODO: tagFunction() the navbar logic?
+  navbarClass <- "navbar navbar-default"
+  position <- match.arg(position)
+  if (!is.null(position))
+    navbarClass <- paste0(navbarClass, " navbar-", position)
+  if (inverse)
+    navbarClass <- paste(navbarClass, "navbar-inverse")
+
+  if (!is.null(id))
+    selected <- restoreInput(id = id, default = selected)
+
+  # build the tabset
+  tabset <- buildTabset(..., ulClass = "nav navbar-nav", id = id, selected = selected)
+
+  containerClass <- paste0("container", if (fluid) "-fluid")
+
+  # built the container div dynamically to support optional collapsibility
+  if (collapsible) {
+    navId <- paste0("navbar-collapse-", p_randomInt(1000, 10000))
+    containerDiv <- div(class=containerClass,
+      div(class="navbar-header",
+        tags$button(type="button", class="navbar-toggle collapsed",
+          `data-toggle`="collapse", `data-target`=paste0("#", navId),
+          span(class="sr-only", "Toggle navigation"),
+          span(class="icon-bar"),
+          span(class="icon-bar"),
+          span(class="icon-bar")
+        ),
+        span(class="navbar-brand", pageTitle)
+      ),
+      div(class="navbar-collapse collapse", id=navId, tabset$navList)
+    )
+  } else {
+    containerDiv <- div(class=containerClass,
+      div(class="navbar-header",
+        span(class="navbar-brand", pageTitle)
+      ),
+      tabset$navList
+    )
+  }
+
+  # build the main tab content div
+  contentDiv <- div(class=containerClass)
+  if (!is.null(header))
+    contentDiv <- tagAppendChild(contentDiv, div(class="row", header))
+  contentDiv <- tagAppendChild(contentDiv, tabset$content)
+  if (!is.null(footer))
+    contentDiv <- tagAppendChild(contentDiv, div(class="row", footer))
+
+  # build the page
+  bootstrapPage(
+    title = windowTitle,
     theme = theme,
-    window_title = windowTitle,
-    lang = lang
-  ))
+    lang = lang,
+    tags$nav(class=navbarClass, role="navigation", containerDiv),
+    contentDiv
+  )
 }
 
 #' @param menuName A name that identifies this `navbarMenu`. This
@@ -448,7 +498,19 @@ navbarPage <- function(title,
 #' @rdname navbarPage
 #' @export
 navbarMenu <- function(title, ..., menuName = title, icon = NULL) {
-  bslib::nav_menu(title, ..., value = menuName, icon = icon)
+  icon <- prepTabIcon(icon)
+  structure(list(title = title,
+                 menuName = menuName,
+                 tabs = list2(...),
+                 # Here for legacy reasons
+                 # https://github.com/cran/miniUI/blob/74c87d3/R/layout.R#L369
+                 iconClass = tagGetAttribute(icon, "class"),
+                 icon = icon),
+            class = "shiny.navbarmenu")
+}
+
+isNavbarMenu <- function(x) {
+  inherits(x, "shiny.navbarmenu")
 }
 
 #' Create a well panel
@@ -583,14 +645,39 @@ helpText <- function(...) {
 #' @export
 #' @describeIn tabPanel Create a tab panel that can be included within a [tabsetPanel()] or a [navbarPage()].
 tabPanel <- function(title, ..., value = title, icon = NULL) {
-  bslib::nav(title, ..., value = value, icon = icon)
+  icon <- prepTabIcon(icon)
+  pane <- div(
+    class = "tab-pane",
+    title = title,
+    `data-value` = value,
+    # Here for legacy reasons
+    # https://github.com/cran/miniUI/blob/74c87d/R/layout.R#L395
+    `data-icon-class` = tagGetAttribute(icon, "class"),
+    ...
+  )
+  attr(pane, "_shiny_icon") <- icon
+  pane
+}
+
+isTabPanel <- function(x) {
+  if (!inherits(x, "shiny.tag")) return(FALSE)
+  class <- tagGetAttribute(x, "class") %||% ""
+  "tab-pane" %in% strsplit(class, "\\s+")[[1]]
 }
 
 #' @export
 #' @describeIn tabPanel Create a tab panel that drops the title argument.
 #'   This function should be used within `tabsetPanel(type = "hidden")`. See [tabsetPanel()] for example usage.
 tabPanelBody <- function(value, ..., icon = NULL) {
-  bslib::nav_content(value, ..., icon = icon)
+  if (
+    !is.character(value) ||
+    length(value) != 1 ||
+    any(is.na(value)) ||
+    nchar(value) == 0
+  ) {
+    stop("`value` must be a single, non-empty string value")
+  }
+  tabPanel(title = NULL, ..., value = value, icon = icon)
 }
 
 #' Create a tabset panel
@@ -666,17 +753,20 @@ tabsetPanel <- function(...,
                         header = NULL,
                         footer = NULL) {
 
-  func <- switch(
-    match.arg(type),
-    tabs = bslib::navs_tab,
-    pills = bslib::navs_pill,
-    hidden = bslib::navs_hidden
-  )
+  if (!is.null(id))
+    selected <- restoreInput(id = id, default = selected)
 
-  # bslib adds a class to make the content browsable() by default,
-  # but that's probably too big of a change for shiny
-  remove_first_class(
-    func(..., id = id, selected = selected, header = header, footer = footer)
+  type <- match.arg(type)
+  tabset <- buildTabset(..., ulClass = paste0("nav nav-", type), id = id, selected = selected)
+
+  tags$div(
+    class = "tabbable",
+    !!!dropNulls(list(
+      tabset$navList,
+      header,
+      tabset$content,
+      footer
+    ))
   )
 }
 
@@ -732,18 +822,275 @@ navlistPanel <- function(...,
                          well = TRUE,
                          fluid = TRUE,
                          widths = c(4, 8)) {
-  remove_first_class(bslib::navs_pill_list(
-    ..., id = id, selected = selected,
-    header = header, footer = footer,
-    well = well, fluid = fluid, widths = widths
-  ))
+
+  if (!is.null(id))
+    selected <- restoreInput(id = id, default = selected)
+
+  tabset <- buildTabset(
+    ..., ulClass = "nav nav-pills nav-stacked",
+    textFilter = function(text) tags$li(class = "navbar-brand", text),
+    id = id, selected = selected
+  )
+
+  row <- if (fluid) fluidRow else fixedRow
+
+  row(
+    column(widths[[1]], class = if (well) "well", tabset$navList),
+    column(
+      widths[[2]],
+      !!!dropNulls(list(header, tabset$content, footer))
+    )
+  )
 }
 
-remove_first_class <- function(x) {
-  class(x) <- class(x)[-1]
+# Helpers to build tabsetPanels (& Co.) and their elements
+markTabAsSelected <- function(x) {
+  attr(x, "selected") <- TRUE
   x
 }
 
+isTabSelected <- function(x) {
+  isTRUE(attr(x, "selected", exact = TRUE))
+}
+
+containsSelectedTab <- function(tabs) {
+  any(vapply(tabs, isTabSelected, logical(1)))
+}
+
+findAndMarkSelectedTab <- function(tabs, selected, foundSelected) {
+  tabs <- lapply(tabs, function(x) {
+    if (foundSelected || is.character(x)) {
+      # Strings are not selectable items
+
+    } else if (isNavbarMenu(x)) {
+      # Recur for navbarMenus
+      res <- findAndMarkSelectedTab(x$tabs, selected, foundSelected)
+      x$tabs <- res$tabs
+      foundSelected <<- res$foundSelected
+
+    } else {
+      # Base case: regular tab item. If the `selected` argument is
+      # provided, check for a match in the existing tabs; else,
+      # mark first available item as selected
+      if (is.null(selected)) {
+        foundSelected <<- TRUE
+        x <- markTabAsSelected(x)
+      } else {
+        tabValue <- x$attribs$`data-value` %||% x$attribs$title
+        if (identical(selected, tabValue)) {
+          foundSelected <<- TRUE
+          x <- markTabAsSelected(x)
+        }
+      }
+    }
+    return(x)
+  })
+  return(list(tabs = tabs, foundSelected = foundSelected))
+}
+
+prepTabIcon <- function(x = NULL) {
+  if (is.null(x)) return(NULL)
+  if (!inherits(x, "shiny.tag")) {
+    stop(
+      "`icon` must be a `shiny.tag` object. ",
+      "Try passing `icon()` (or `tags$i()`) to the `icon` parameter.",
+      call. = FALSE
+    )
+  }
+
+  is_fa <- grepl("fa-", tagGetAttribute(x, "class") %||% "", fixed = TRUE)
+  if (!is_fa) {
+    return(x)
+  }
+
+  # for font-awesome we specify fixed-width
+  tagAppendAttributes(x, class = "fa-fw")
+}
+
+# Text filter for navbarMenu's (plain text) separators
+navbarMenuTextFilter <- function(text) {
+  if (grepl("^\\-+$", text)) tags$li(class = "divider")
+  else tags$li(class = "dropdown-header", text)
+}
+
+# This function is called internally by navbarPage, tabsetPanel
+# and navlistPanel
+buildTabset <- function(..., ulClass, textFilter = NULL, id = NULL,
+                        selected = NULL, foundSelected = FALSE) {
+
+  tabs <- dropNulls(list2(...))
+  res <- findAndMarkSelectedTab(tabs, selected, foundSelected)
+  tabs <- res$tabs
+  foundSelected <- res$foundSelected
+
+  # add input class if we have an id
+  if (!is.null(id)) ulClass <- paste(ulClass, "shiny-tab-input")
+
+  if (anyNamed(tabs)) {
+    nms <- names(tabs)
+    nms <- nms[nzchar(nms)]
+    stop("Tabs should all be unnamed arguments, but some are named: ",
+      paste(nms, collapse = ", "))
+  }
+
+  tabsetId <- p_randomInt(1000, 10000)
+  tabs <- lapply(seq_len(length(tabs)), buildTabItem,
+            tabsetId = tabsetId, foundSelected = foundSelected,
+            tabs = tabs, textFilter = textFilter)
+
+  tabNavList <- tags$ul(class = ulClass, id = id,
+                  `data-tabsetid` = tabsetId, !!!lapply(tabs, "[[", "liTag"))
+
+  tabContent <- tags$div(class = "tab-content",
+                  `data-tabsetid` = tabsetId, !!!lapply(tabs, "[[", "divTag"))
+
+  list(navList = tabNavList, content = tabContent)
+}
+
+# Builds tabPanel/navbarMenu items (this function used to be
+# declared inside the buildTabset() function and it's been
+# refactored for clarity and reusability). Called internally
+# by buildTabset.
+buildTabItem <- function(index, tabsetId, foundSelected, tabs = NULL,
+                         divTag = NULL, textFilter = NULL) {
+
+  divTag <- divTag %||% tabs[[index]]
+
+  # Handles navlistPanel() headers and dropdown dividers
+  if (is.character(divTag) && !is.null(textFilter)) {
+    return(list(liTag = textFilter(divTag), divTag = NULL))
+  }
+
+  if (isNavbarMenu(divTag)) {
+    # tabPanelMenu item: build the child tabset
+    tabset <- buildTabset(
+      !!!divTag$tabs, ulClass = "dropdown-menu",
+      textFilter = navbarMenuTextFilter,
+      foundSelected = foundSelected
+    )
+    return(buildDropdown(divTag, tabset))
+  }
+
+  if (isTabPanel(divTag)) {
+    return(buildNavItem(divTag, tabsetId, index))
+  }
+
+  # The behavior is undefined at this point, so construct a condition message
+  msg <- paste0(
+    "Expected a collection `tabPanel()`s",
+    if (is.null(textFilter)) " and `navbarMenu()`.",
+    if (!is.null(textFilter)) ", `navbarMenu()`, and/or character strings.",
+    " Consider using `header` or `footer` if you wish to place content above (or below) every panel's contents"
+  )
+
+  # Luckily this case has never worked, so it's safe to throw here
+  # https://github.com/rstudio/shiny/issues/3313
+  if (!inherits(divTag, "shiny.tag"))  {
+    stop(msg, call. = FALSE)
+  }
+
+  # Unfortunately, this 'off-label' use case creates an 'empty' nav and includes
+  # the divTag content on every tab. There shouldn't be any reason to be relying on
+  # this behavior since we now have pre/post arguments, so throw a warning, but still
+  # support the use case since we don't make breaking changes
+  warning(msg, call. = FALSE)
+
+  return(buildNavItem(divTag, tabsetId, index))
+}
+
+buildNavItem <- function(divTag, tabsetId, index) {
+  id <- paste("tab", tabsetId, index, sep = "-")
+  # Get title attribute directory (not via tagGetAttribute()) so that contents
+  # don't get passed to as.character().
+  # https://github.com/rstudio/shiny/issues/3352
+  title <- divTag$attribs[["title"]]
+  value <- divTag$attribs[["data-value"]]
+  active <- isTabSelected(divTag)
+  divTag <- tagAppendAttributes(divTag, class = if (active) "active")
+  divTag$attribs$id <- id
+  divTag$attribs$title <- NULL
+  list(
+    divTag = divTag,
+    liTag = tagAddRenderHook(
+      liTag(id, title, value, attr(divTag, "_shiny_icon")),
+      function(x) {
+        if (isTRUE(getCurrentThemeVersion() >= 4)) {
+          tagQuery(x)$
+            addClass("nav-item")$
+            find("a")$
+            addClass(c("nav-link", if (active) "active"))$
+            allTags()
+        } else {
+          tagAppendAttributes(x, class = if (active) "active")
+        }
+      }
+    )
+  )
+}
+
+liTag <- function(id, title, value, icon) {
+  tags$li(
+    tags$a(
+      href = paste0("#", id),
+      `data-toggle` = "tab",
+      `data-value` = value,
+       icon, title
+    )
+  )
+}
+
+buildDropdown <- function(divTag, tabset) {
+
+  navList <- tagAddRenderHook(
+    tabset$navList,
+    function(x) {
+      if (isTRUE(getCurrentThemeVersion() >= 4)) {
+        tagQuery(x)$
+          find(".nav-item")$
+          removeClass("nav-item")$
+          find(".nav-link")$
+          removeClass("nav-link")$
+          addClass("dropdown-item")$
+          allTags()
+      } else {
+        x
+      }
+    }
+  )
+
+  active <- containsSelectedTab(divTag$tabs)
+
+  dropdown <- tags$li(
+    class = "dropdown",
+    tags$a(
+      href = "#",
+      class = "dropdown-toggle",
+      `data-toggle` = "dropdown",
+      `data-value` = divTag$menuName,
+      divTag$icon,
+      divTag$title,
+      tags$b(class = "caret")
+    ),
+    navList,
+    .renderHook = function(x) {
+      if (isTRUE(getCurrentThemeVersion() >= 4)) {
+        tagQuery(x)$
+          addClass("nav-item")$
+          find(".dropdown-toggle")$
+          addClass("nav-link")$
+          allTags()
+      } else {
+        x
+      }
+    }
+  )
+
+  list(
+    divTag = tabset$content$children,
+    liTag = dropdown
+  )
+}
+
 #' Create a text output element
 #'
 #' Render a reactive output variable as text within an application page.

R/input-date.R

@@ -133,11 +133,13 @@ dateInput <- function(inputId, label, value = NULL, min = NULL, max = NULL,
 }
 
 
+datePickerVersion <- "1.9.0"
+
 datePickerDependency <- function(theme) {
   list(
     htmlDependency(
       name = "bootstrap-datepicker-js",
-      version = version_bs_date_picker,
+      version = datePickerVersion,
       src = c(href = "shared/datepicker"),
       script = if (getOption("shiny.minified", TRUE)) "js/bootstrap-datepicker.min.js"
                else                                   "js/bootstrap-datepicker.js",
@@ -156,7 +158,7 @@ datePickerCSS <- function(theme) {
   if (!is_bs_theme(theme)) {
     return(htmlDependency(
       name = "bootstrap-datepicker-css",
-      version = version_bs_date_picker,
+      version = datePickerVersion,
       src = c(href = "shared/datepicker"),
       stylesheet = "css/bootstrap-datepicker3.min.css"
     ))
@@ -168,7 +170,7 @@ datePickerCSS <- function(theme) {
     input = sass::sass_file(scss_file),
     theme = theme,
     name = "bootstrap-datepicker",
-    version = version_bs_date_picker,
+    version = datePickerVersion,
     cache_key_extra = shinyPackageVersion()
   )
 }

R/input-select.R

@@ -208,15 +208,6 @@ selectizeIt <- function(inputId, select, options, nonempty = FALSE) {
     options$plugins <- c(options$plugins, list('selectize-plugin-a11y'))
   }
 
-  # to prevent clipping of the selectize drop-down we set the dropdownParent
-  # to "body". This might be necessary if e.g. overflow-x: scroll is set
-  # on it's container, which forces overflow-y to 'auto' (as per
-  # https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y). Discussion
-  # of usage here: https://github.com/selectize/selectize.js/issues/192
-  if (is.null(options$dropdownParent)) {
-    options$dropdownParent <- "body"
-  }
-
   res <- checkAsIs(options)
 
   deps <- list(selectizeDependency())
@@ -252,8 +243,9 @@ selectizeDependency <- function() {
 }
 
 selectizeDependencyFunc <- function(theme) {
+  selectizeVersion <- "0.13.3"
   if (!is_bs_theme(theme)) {
-    return(selectizeStaticDependency(version_selectize))
+    return(selectizeStaticDependency(selectizeVersion))
   }
 
   selectizeDir <- system.file(package = "shiny", "www/shared/selectize/")
@@ -275,7 +267,7 @@ selectizeDependencyFunc <- function(theme) {
     input = sass::sass_file(stylesheet),
     theme = theme,
     name = "selectize",
-    version = version_selectize,
+    version = selectizeVersion,
     cache_key_extra = shinyPackageVersion(),
     .dep_args = list(script = script)
   )

R/input-slider.R

@@ -201,16 +201,18 @@ sliderInput <- function(inputId, label, min, max, value, step = NULL,
 }
 
 
+ionRangeSliderVersion <- "2.3.1"
+
 ionRangeSliderDependency <- function() {
   list(
     # ion.rangeSlider also needs normalize.css, which is already included in Bootstrap.
     htmlDependency(
-      "ionrangeslider-javascript", version_ion_range_slider,
+      "ionrangeslider-javascript", ionRangeSliderVersion,
       src = c(href = "shared/ionrangeslider"),
       script = "js/ion.rangeSlider.min.js"
     ),
     htmlDependency(
-      "strftime", version_strftime,
+      "strftime", "0.9.2",
       src = c(href = "shared/strftime"),
       script = "strftime-min.js"
     ),
@@ -222,19 +224,35 @@ ionRangeSliderDependencyCSS <- function(theme) {
   if (!is_bs_theme(theme)) {
     return(htmlDependency(
       "ionrangeslider-css",
-      version_ion_range_slider,
+      ionRangeSliderVersion,
       src = c(href = "shared/ionrangeslider"),
       stylesheet = "css/ion.rangeSlider.css"
     ))
   }
 
-  bslib::bs_dependency(
-    input = sass::sass_file(
-      system.file(package = "shiny", "www/shared/ionrangeslider/scss/shiny.scss")
+  # Remap some variable names for ionRangeSlider's scss
+  sass_input <- list(
+    list(
+      # The bootswatch materia theme sets $input-bg: transparent;
+      # which is an issue for the slider's handle(s) (#3130)
+      bg = "if(alpha($input-bg)==0, $body-bg, $input-bg)",
+      fg = sprintf(
+        "if(alpha($input-color)==0, $%s, $input-color)",
+        if ("3" %in% bslib::theme_version(theme)) "text-color" else "body-color"
+      ),
+      accent = "$component-active-bg",
+      `font-family` = "$font-family-base"
     ),
+    sass::sass_file(
+      system.file(package = "shiny", "www/shared/ionrangeslider/scss/shiny.scss")
+    )
+  )
+
+  bslib::bs_dependency(
+    input = sass_input,
     theme = theme,
     name = "ionRangeSlider",
-    version = version_ion_range_slider,
+    version = ionRangeSliderVersion,
     cache_key_extra = shinyPackageVersion()
   )
 }

R/insert-tab.R

@@ -112,13 +112,35 @@
 #'
 #' }
 #' @export
-insertTab <- function(inputId, tab, target = NULL,
+insertTab <- function(inputId, tab, target,
                       position = c("before", "after"), select = FALSE,
                       session = getDefaultReactiveDomain()) {
-  bslib::nav_insert(
-    inputId, tab, target,
-    match.arg(position), select, session
-  )
+  force(target)
+  force(select)
+  position <- match.arg(position)
+  inputId <- session$ns(inputId)
+
+  # Barbara -- August 2017
+  # Note: until now, the number of tabs in a tabsetPanel (or navbarPage
+  # or navlistPanel) was always fixed. So, an easy way to give an id to
+  # a tab was simply incrementing a counter. (Just like it was easy to
+  # give a random 4-digit number to identify the tabsetPanel). Since we
+  # can only know this in the client side, we'll just pass `id` and
+  # `tsid` (TabSetID) as dummy values that will be fixed in the JS code.
+  item <- buildTabItem("id", "tsid", TRUE, divTag = tab,
+    textFilter = if (is.character(tab)) navbarMenuTextFilter else NULL)
+
+  callback <- function() {
+    session$sendInsertTab(
+      inputId = inputId,
+      liTag = processDeps(item$liTag, session),
+      divTag = processDeps(item$divTag, session),
+      menuName = NULL,
+      target = target,
+      position = position,
+      select = select)
+  }
+  session$onFlush(callback, once = TRUE)
 }
 
 #' @param menuName This argument should only be used when you want to
@@ -137,21 +159,63 @@ insertTab <- function(inputId, tab, target = NULL,
 #' @export
 prependTab <- function(inputId, tab, select = FALSE, menuName = NULL,
                        session = getDefaultReactiveDomain()) {
-  bslib::tab_prepend(inputId, tab, menu_title = menuName, select = select, session = session)
+  force(select)
+  force(menuName)
+  inputId <- session$ns(inputId)
+
+  item <- buildTabItem("id", "tsid", TRUE, divTag = tab,
+    textFilter = if (is.character(tab)) navbarMenuTextFilter else NULL)
+
+  callback <- function() {
+    session$sendInsertTab(
+      inputId = inputId,
+      liTag = processDeps(item$liTag, session),
+      divTag = processDeps(item$divTag, session),
+      menuName = menuName,
+      target = NULL,
+      position = "after",
+      select = select)
+  }
+  session$onFlush(callback, once = TRUE)
 }
 
 #' @rdname insertTab
 #' @export
 appendTab <- function(inputId, tab, select = FALSE, menuName = NULL,
                       session = getDefaultReactiveDomain()) {
-  bslib::tab_append(inputId, tab, menu_title = menuName, select = select, session = session)
+  force(select)
+  force(menuName)
+  inputId <- session$ns(inputId)
+
+  item <- buildTabItem("id", "tsid", TRUE, divTag = tab,
+    textFilter = if (is.character(tab)) navbarMenuTextFilter else NULL)
+
+  callback <- function() {
+    session$sendInsertTab(
+      inputId = inputId,
+      liTag = processDeps(item$liTag, session),
+      divTag = processDeps(item$divTag, session),
+      menuName = menuName,
+      target = NULL,
+      position = "before",
+      select = select)
+  }
+  session$onFlush(callback, once = TRUE)
 }
 
 #' @rdname insertTab
 #' @export
 removeTab <- function(inputId, target,
                       session = getDefaultReactiveDomain()) {
-  bslib::nav_remove(inputId, target, session)
+  force(target)
+  inputId <- session$ns(inputId)
+
+  callback <- function() {
+    session$sendRemoveTab(
+      inputId = inputId,
+      target = target)
+  }
+  session$onFlush(callback, once = TRUE)
 }
 
 

R/modal.R

@@ -151,25 +151,18 @@ removeModal <- function(session = getDefaultReactiveDomain()) {
 #' }
 #' @export
 modalDialog <- function(..., title = NULL, footer = modalButton("Dismiss"),
-  size = c("m", "s", "l", "xl"), easyClose = FALSE, fade = TRUE) {
+  size = c("m", "s", "l"), easyClose = FALSE, fade = TRUE) {
 
   size <- match.arg(size)
 
-  backdrop <- if (!easyClose) "static"
-  keyboard <- if (!easyClose) "false"
-  div(
-    id = "shiny-modal",
-    class = "modal",
-    class = if (fade) "fade",
-    tabindex = "-1",
-    `data-backdrop` = backdrop,
-    `data-bs-backdrop` = backdrop,
-    `data-keyboard` = keyboard,
-    `data-bs-keyboard` = keyboard,
+  cls <- if (fade) "modal fade" else "modal"
+  div(id = "shiny-modal", class = cls, tabindex = "-1",
+    `data-backdrop` = if (!easyClose) "static",
+    `data-keyboard` = if (!easyClose) "false",
 
     div(
       class = "modal-dialog",
-      class = switch(size, s = "modal-sm", m = NULL, l = "modal-lg", xl = "modal-xl"),
+      class = switch(size, s = "modal-sm", m = NULL, l = "modal-lg"),
       div(class = "modal-content",
         if (!is.null(title)) div(class = "modal-header",
           tags$h4(class = "modal-title", title)
@@ -178,25 +171,14 @@ modalDialog <- function(..., title = NULL, footer = modalButton("Dismiss"),
         if (!is.null(footer)) div(class = "modal-footer", footer)
       )
     ),
-    tags$script(
-      "if (window.bootstrap) {
-         var modal = new bootstrap.Modal(document.getElementById('shiny-modal'));
-         modal.show();
-      } else {
-         $('#shiny-modal').modal().focus();
-      }"
-    )
+    tags$script("$('#shiny-modal').modal().focus();")
   )
 }
 
 #' @export
 #' @rdname modalDialog
 modalButton <- function(label, icon = NULL) {
-  tags$button(
-    type = "button",
-    class = "btn btn-default",
-    `data-dismiss` = "modal",
-    `data-bs-dismiss` = "modal",
-    validateIcon(icon), label
+  tags$button(type = "button", class = "btn btn-default",
+    `data-dismiss` = "modal", validateIcon(icon), label
   )
 }

R/render-plot.R

@@ -36,14 +36,12 @@
 #' @param res Resolution of resulting plot, in pixels per inch. This value is
 #'   passed to [grDevices::png()]. Note that this affects the resolution of PNG
 #'   rendering in R; it won't change the actual ppi of the browser.
-#' @param alt Alternate text for the HTML `<img>` tag if it cannot be displayed
-#'   or viewed (i.e., the user uses a screen reader). In addition to a character
-#'   string, the value may be a reactive expression (or a function referencing
-#'   reactive values) that returns a character string. If the value is `NA` (the
-#'   default), then `ggplot2::get_alt_text()` is used to extract alt text from
-#'   ggplot objects; for other plots, `NA` results in alt text of "Plot object".
-#'   `NULL` or `""` is not recommended because those should be limited to
-#'   decorative images.
+#' @param alt Alternate text for the HTML `<img>` tag
+#'   if it cannot be displayed or viewed (i.e., the user uses a screen reader).
+#'   In addition to a character string, the value may be a reactive expression
+#'   (or a function referencing reactive values) that returns a character string.
+#'   NULL or "" is not recommended because those should be limited to decorative images
+#'   (the default is "Plot object").
 #' @param ... Arguments to be passed through to [grDevices::png()].
 #'   These can be used to set the width, height, background color, etc.
 #' @param env The environment in which to evaluate `expr`.
@@ -60,7 +58,7 @@
 #'   interactive R Markdown document.
 #' @export
 renderPlot <- function(expr, width = 'auto', height = 'auto', res = 72, ...,
-                       alt = NA,
+                       alt = "Plot object",
                        env = parent.frame(), quoted = FALSE,
                        execOnResize = FALSE, outputArgs = list()
 ) {
@@ -214,7 +212,7 @@ resizeSavedPlot <- function(name, session, result, width, height, alt, pixelrati
     src = session$fileUrl(name, outfile, contentType = "image/png"),
     width = width,
     height = height,
-    alt = result$alt,
+    alt = alt,
     coordmap = coordmap,
     error = attr(coordmap, "error", exact = TRUE)
   )
@@ -290,7 +288,6 @@ drawPlot <- function(name, session, func, width, height, alt, pixelratio, res, .
               recordedPlot = grDevices::recordPlot(),
               coordmap = getCoordmap(value, width*pixelratio, height*pixelratio, res*pixelratio),
               pixelratio = pixelratio,
-              alt = if (anyNA(alt)) getAltText(value) else alt,
               res = res
             )
           }
@@ -305,10 +302,10 @@ drawPlot <- function(name, session, func, width, height, alt, pixelratio, res, .
     ),
     function(result) {
       result$img <- dropNulls(list(
-        src = session$fileUrl(name, outfile, contentType = 'image/png'),
+        src = session$fileUrl(name, outfile, contentType='image/png'),
         width = width,
         height = height,
-        alt = result$alt,
+        alt = alt,
         coordmap = result$coordmap,
         # Get coordmap error message if present
         error = attr(result$coordmap, "error", exact = TRUE)
@@ -342,24 +339,6 @@ custom_print.ggplot <- function(x) {
   ), class = "ggplot_build_gtable")
 }
 
-# Infer alt text description from renderPlot() value
-# (currently just ggplot2 is supported)
-getAltText <- function(x, default = "Plot Object") {
-  # Since, inside renderPlot(), custom_print.ggplot()
-  # overrides print.ggplot, this class indicates a ggplot()
-  if (!inherits(x, "ggplot_build_gtable")) {
-    return(default)
-  }
-  # ggplot2::get_alt_text() was added in v3.3.4
-  # https://github.com/tidyverse/ggplot2/pull/4482
-  get_alt <- getNamespace("ggplot2")$get_alt_text
-  if (!is.function(get_alt)) {
-    return(default)
-  }
-  alt <- paste(get_alt(x$build), collapse = " ")
-  if (nzchar(alt)) alt else default
-}
-
 # The coordmap extraction functions below return something like the examples
 # below. For base graphics:
 # plot(mtcars$wt, mtcars$mpg)

R/showcase.R

@@ -83,7 +83,7 @@ navTabsHelper <- function(files, prefix = "") {
     with(tags,
       li(class=if (tolower(file) %in% c("app.r", "server.r")) "active" else "",
          a(href=paste("#", gsub(".", "_", file, fixed=TRUE), "_code", sep=""),
-           "data-toggle"="tab", "data-bs-toggle"="tab", paste0(prefix, file)))
+           "data-toggle"="tab", paste0(prefix, file)))
     )
   })
 }
@@ -92,7 +92,7 @@ navTabsDropdown <- function(files) {
   if (length(files) > 0) {
     with(tags,
       li(role="presentation", class="dropdown",
-        a(class="dropdown-toggle", `data-toggle`="dropdown", `data-bs-toggle`="dropdown", href="#",
+        a(class="dropdown-toggle", `data-toggle`="dropdown", href="#",
           role="button", `aria-haspopup`="true", `aria-expanded`="false",
           "www", span(class="caret")
         ),

R/version_bs_date_picker.R

@@ -1,2 +0,0 @@
-# Generated by tools/updateBootstrapDatepicker.R; do not edit by hand
-version_bs_date_picker <- "1.9.0"

R/version_ion_range_slider.R

@@ -1,2 +0,0 @@
-# Generated by tools/updateIonRangeSlider.R; do not edit by hand
-version_ion_range_slider <- "2.3.1"

R/version_selectize.R

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

R/version_strftime.R

@@ -1,2 +0,0 @@
-# Generated by tools/updateStrftime.R; do not edit by hand
-version_strftime <- "0.9.2"

inst/www/shared/ionrangeslider/css/ion.rangeSlider.css

@@ -13,6 +13,8 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  font-size: 12px;
+  font-family: Arial, sans-serif;
 }
 
 .irs-line {
@@ -90,6 +92,7 @@
   left: 0;
   width: 1px;
   height: 8px;
+  background: #000;
 }
 
 .irs-grid-pol.small {
@@ -105,6 +108,7 @@
   font-size: 9px;
   line-height: 9px;
   padding: 0 3px;
+  color: #000;
 }
 
 .irs-disable-mask {
@@ -149,7 +153,7 @@
 }
 
 .irs {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: Arial, sans-serif;
 }
 
 .irs--shiny {
@@ -163,7 +167,7 @@
 .irs--shiny .irs-line {
   top: 25px;
   height: 8px;
-  background: linear-gradient(to bottom, #dedede -50%, #fff 150%);
+  background: linear-gradient(to bottom, #dedede -50%, white 150%);
   background-color: #ededed;
   border: 1px solid #cccccc;
   border-radius: 8px;
@@ -172,9 +176,9 @@
 .irs--shiny .irs-bar {
   top: 25px;
   height: 8px;
-  border-top: 1px solid #337ab7;
-  border-bottom: 1px solid #337ab7;
-  background: #337ab7;
+  border-top: 1px solid #428bca;
+  border-bottom: 1px solid #428bca;
+  background: #428bca;
 }
 
 .irs--shiny .irs-bar--single {
@@ -203,13 +207,14 @@
 }
 
 .irs--shiny .irs-handle.state_hover, .irs--shiny .irs-handle:hover {
-  background: #fff;
+  background: white;
 }
 
 .irs--shiny .irs-min,
 .irs--shiny .irs-max {
   top: 0;
   padding: 1px 3px;
+  color: #333333;
   text-shadow: none;
   background-color: rgba(0, 0, 0, 0.1);
   border-radius: 3px;
@@ -228,7 +233,7 @@
   color: #fff;
   text-shadow: none;
   padding: 1px 3px;
-  background-color: #337ab7;
+  background-color: #428bca;
   border-radius: 3px;
   font-size: 11px;
   line-height: 1.333;
@@ -245,11 +250,12 @@
 }
 
 .irs--shiny .irs-grid-pol {
-  background-color: #000;
+  background-color: black;
 }
 
 .irs--shiny .irs-grid-text {
   bottom: 5px;
+  color: #1a1a1a;
 }
 
 .irs--shiny .irs-grid-pol.small {

inst/www/shared/ionrangeslider/scss/_base.scss

@@ -4,6 +4,8 @@
     @include pos-r();
     -webkit-touch-callout: none;
     @include no-click();
+    font-size: 12px;
+    font-family: Arial, sans-serif;
 
     &-line {
         @include pos-r();
@@ -81,6 +83,7 @@
             left: 0;
             width: 1px;
             height: 8px;
+            background: #000;
 
             &.small {
                 height: 4px;
@@ -96,6 +99,7 @@
             font-size: 9px;
             line-height: 9px;
             padding: 0 3px;
+            color: #000;
         }
     }
 

inst/www/shared/ionrangeslider/scss/shiny.scss

@@ -19,7 +19,8 @@
 
 ////////////////////////////////////////////////////////////////////////////
 
-$font-family: $font-family-base !default;
+// Re-define font-family on .irs to make it configurable
+$font-family: Arial, sans-serif !default;
 .irs {
   font-family: $font-family;
 }
@@ -35,9 +36,9 @@ $font-family: $font-family-base !default;
   $custom_radius: 3px !default;
 
   // "High-level" coloring
-  $bg:     $body-bg !default;
-  $fg:     color-contrast($body-bg) !default;
-  $accent: $component-active-bg !default;
+  $bg:     white !default;
+  $fg:     black !default;
+  $accent: #428bca !default;
 
   // "Low-level" coloring, borders, and fonts
   $line_bg:            linear-gradient(to bottom, mix($bg, $fg, 87%) -50%, $bg 150%) !default;
@@ -51,7 +52,7 @@ $font-family: $font-family-base !default;
   $handle_border:      1px solid mix($bg, $fg, 67%) !default;
   $handle_box_shadow:  1px 1px 3px rgba($bg, 0.3) !default;
 
-  $minmax_text_color:  null !default;
+  $minmax_text_color:  mix($bg, $fg, 20%) !default;
   $minmax_bg_color:    rgba($fg, 0.1) !default;
   $minmax_font_size:   10px !default;
   $minmax_line_height: 1.333 !default;
@@ -63,7 +64,7 @@ $font-family: $font-family-base !default;
 
   $grid_major_color:  $fg !default;
   $grid_minor_color:  mix($bg, $fg, 60%) !default;
-  $grid_text_color:   null !default;
+  $grid_text_color:   mix($bg, $fg, 10%) !default;
 
 
   height: 40px;

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

@@ -0,0 +1,16 @@
+.#{$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;
+    box-shadow: inset 0 0 12px 4px #fff;
+  }
+  .ui-sortable-placeholder::after {
+    content: "!";
+    visibility: hidden;
+  }
+  .ui-sortable-helper {
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  }
+}

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

@@ -0,0 +1,23 @@
+.#{$selectize}-control {
+  .dropdown-header {
+    position: relative;
+    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%);
+    border-radius: $select-border-radius $select-border-radius 0 0;
+  }
+  .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;
+  }
+  .dropdown-header-close:hover {
+    color: darken($select-color-text, 25%);
+  }
+}

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

@@ -0,0 +1,22 @@
+.#{$selectize}-dropdown.plugin-optgroup_columns {
+  .#{$selectize}-dropdown-content {
+    display: flex;
+  }
+
+  .optgroup {
+    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;
+  }
+  .optgroup:before {
+    display: none;
+  }
+  .optgroup-header {
+    border-top: 0 none;
+  }
+}

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

@@ -0,0 +1,45 @@
+.#{$selectize}-control.plugin-remove_button {
+  .item {
+    display: inline-flex;
+    align-items: center;
+    padding-right: 0 !important;
+  }
+
+  .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;
+  }
+
+  .item .remove:hover {
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  .item.active .remove {
+    border-left-color: $select-color-item-active-border;
+  }
+
+  .disabled .item .remove:hover {
+    background: none;
+  }
+
+  .disabled .item .remove {
+    border-left-color: lighten(
+      desaturate($select-color-item-border, 100%),
+      $select-lighten-disabled-item-border
+    );
+  }
+
+  .remove-single {
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: 23px;
+  }
+}

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

@@ -1,16 +0,0 @@
-.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);
-  }
-  .ui-sortable-placeholder::after {
-	content: '!';
-	visibility: hidden;
-  }
-  .ui-sortable-helper {
-	@include selectize-box-shadow(0 2px 5px rgba(0,0,0,0.2));
-  }
-}

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

@@ -1,20 +0,0 @@
-.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-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 +0,0 @@
-.selectize-dropdown.plugin-optgroup_columns {
-  .optgroup {
-	border-right: 1px solid #f2f2f2;
-	border-top: 0 none;
-	float: left;
-	@include selectize-box-sizing(border-box);
-  }
-  .optgroup:last-child {
-	border-right: 0 none;
-  }
-  .optgroup:before {
-	display: none;
-  }
-  .optgroup-header {
-	border-top: 0 none;
-  }
-}

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

@@ -1,43 +0,0 @@
-.selectize-control.plugin-remove_button {
-  [data-value] {
-	position: relative;
-	padding-right: 24px !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);
-  }
-  [data-value] .remove:hover {
-	background: rgba(0,0,0,0.05);
-  }
-  [data-value].active .remove {
-	border-left-color: $selectize-color-item-active-border;
-  }
-  .disabled [data-value] .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;
-  }
-}

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

@@ -1,158 +1,138 @@
-/**
- * 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: $input-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: mix($select-color-input, $select-color-text, 90%);
+$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-text: $dropdown-link-color;
+$select-color-dropdown-border-top: mix($input-border, $input-bg, 0.8);
+$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: 0;
+$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;
+  color: $select-color-dropdown-text;
+  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,114 @@
-/**
- * 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: $input-color !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: $danger !default;
+$select-color-input-error-focus: darken(
+  $select-color-input-error,
+  10%
+) !default;
+$select-color-disabled: $input-bg !default;
+$select-color-item: mix($select-color-input, $select-color-text, 90%) !default;
+$select-color-item-border: $input-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-dropdown-text: $dropdown-link-color !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,
+  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;
 
-$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;
+  color: $select-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));
+  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 +124,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 +146,27 @@ $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}-input {
+  overflow: unset;
+  border-radius: 0 $select-border-radius $select-border-radius 0;
 }

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";
 
-$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,381 @@
+/**
+ * selectize.css (v@@version)
+ * Copyright (c) 2013–2015 Brian Reavis & contributors
+ * Copyright (c) 2020 Selectize Team & 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>
+ * @author Ris Adams <selectize@risadams.com> 
+ */
+
 // 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-text: #303030 !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(
+  red($select-color-text),
+  green($select-color-text),
+  blue($select-color-text),
+  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: 0 !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/plugin.scss";
+@import "../plugins/dropdown_header/plugin.scss";
+@import "../plugins/optgroup_columns/plugin.scss";
+@import "../plugins/remove_button/plugin.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;
   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(
+        desaturate($select-color-item-text, 100%),
+        $select-lighten-disabled-item-text
+      );
+      background: lighten(
+        desaturate($select-color-item, 100%),
+        $select-lighten-disabled-item
+      );
+      border: $select-width-item-border solid
+        lighten(
+          desaturate($select-color-item-border, 100%),
+          $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-dropdown-item-active;
+    color: $select-color-dropdown-item-active-text;
+    &.create {
+      color: $select-color-dropdown-item-create-active-text;
+    }
   }
   .create {
-	color: $selectize-color-dropdown-item-create-text;
+    color: $select-color-dropdown-item-create-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;
+  }
+  @keyframes lds-dual-ring {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+.#{$selectize}-control.single .#{$selectize}-input {
+  &,
+  input {
+    cursor: pointer;
+  }
+  &.input-active,
+  &.input-active input {
+    cursor: text;
+  }
+
+  &:after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: $select-arrow-offset;
+    margin-top: round((-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;
   }
   &.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;
+    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.rtl {
-  &.single .selectize-input:after {
-	left: $selectize-arrow-offset;
-	right: auto;
+.#{$selectize}-control.rtl {
+  text-align: right;
+  &.single .#{$selectize}-input:after {
+    left: $select-arrow-offset;
+    right: auto;
   }
-  .selectize-input > input {
-	margin: $selectize-caret-margin-rtl !important;
+  .#{$selectize}-input > input {
+    margin: $select-caret-margin-rtl !important;
   }
 }
 
-.selectize-control .selectize-input.disabled {
-  opacity: $selectize-opacity-disabled;
-  background-color: $selectize-color-disabled;
+.#{$selectize}-control .#{$selectize}-input.disabled {
+  opacity: $select-opacity-disabled;
+  background-color: $select-color-disabled;
 }

man/insertTab.Rd

@@ -10,7 +10,7 @@
 insertTab(
   inputId,
   tab,
-  target = NULL,
+  target,
   position = c("before", "after"),
   select = FALSE,
   session = getDefaultReactiveDomain()

man/modalDialog.Rd

@@ -9,7 +9,7 @@ modalDialog(
   ...,
   title = NULL,
   footer = modalButton("Dismiss"),
-  size = c("m", "s", "l", "xl"),
+  size = c("m", "s", "l"),
   easyClose = FALSE,
   fade = TRUE
 )

man/navbarPage.Rd

@@ -17,7 +17,7 @@ navbarPage(
   collapsible = FALSE,
   fluid = TRUE,
   theme = NULL,
-  windowTitle = NA,
+  windowTitle = title,
   lang = NULL
 )
 
@@ -73,10 +73,8 @@ build of Bootstrap 3 with a customized version of Bootstrap 3 or higher.
 (normally a css file within the www directory, e.g. \code{www/bootstrap.css}).
 }}
 
-\item{windowTitle}{the browser window title (as a character string). The
-default value, \code{NA}, means to use any character strings that appear in
-\code{title} (if none are found, the host URL of the page is displayed by
-default).}
+\item{windowTitle}{The title that should be displayed by the browser window.
+Useful if \code{title} is not a string.}
 
 \item{lang}{ISO 639-1 language code for the HTML page, such as "en" or "ko".
 This will be used as the lang in the \code{<html>} tag, as in \code{<html lang="en">}.

man/renderCachedPlot.Rd

@@ -40,14 +40,12 @@ information on the default sizing policy.}
 \item{...}{Arguments to be passed through to \code{\link[grDevices:png]{grDevices::png()}}.
 These can be used to set the width, height, background color, etc.}
 
-\item{alt}{Alternate text for the HTML \verb{<img>} tag if it cannot be displayed
-or viewed (i.e., the user uses a screen reader). In addition to a character
-string, the value may be a reactive expression (or a function referencing
-reactive values) that returns a character string. If the value is \code{NA} (the
-default), then \code{ggplot2::get_alt_text()} is used to extract alt text from
-ggplot objects; for other plots, \code{NA} results in alt text of "Plot object".
-\code{NULL} or \code{""} is not recommended because those should be limited to
-decorative images.}
+\item{alt}{Alternate text for the HTML \verb{<img>} tag
+if it cannot be displayed or viewed (i.e., the user uses a screen reader).
+In addition to a character string, the value may be a reactive expression
+(or a function referencing reactive values) that returns a character string.
+NULL or "" is not recommended because those should be limited to decorative images
+(the default is "Plot object").}
 
 \item{outputArgs}{A list of arguments to be passed through to the implicit
 call to \code{\link[=plotOutput]{plotOutput()}} when \code{renderPlot} is used in an

man/renderPlot.Rd

@@ -10,7 +10,7 @@ renderPlot(
   height = "auto",
   res = 72,
   ...,
-  alt = NA,
+  alt = "Plot object",
   env = parent.frame(),
   quoted = FALSE,
   execOnResize = FALSE,
@@ -41,14 +41,12 @@ rendering in R; it won't change the actual ppi of the browser.}
 \item{...}{Arguments to be passed through to \code{\link[grDevices:png]{grDevices::png()}}.
 These can be used to set the width, height, background color, etc.}
 
-\item{alt}{Alternate text for the HTML \verb{<img>} tag if it cannot be displayed
-or viewed (i.e., the user uses a screen reader). In addition to a character
-string, the value may be a reactive expression (or a function referencing
-reactive values) that returns a character string. If the value is \code{NA} (the
-default), then \code{ggplot2::get_alt_text()} is used to extract alt text from
-ggplot objects; for other plots, \code{NA} results in alt text of "Plot object".
-\code{NULL} or \code{""} is not recommended because those should be limited to
-decorative images.}
+\item{alt}{Alternate text for the HTML \verb{<img>} tag
+if it cannot be displayed or viewed (i.e., the user uses a screen reader).
+In addition to a character string, the value may be a reactive expression
+(or a function referencing reactive values) that returns a character string.
+NULL or "" is not recommended because those should be limited to decorative images
+(the default is "Plot object").}
 
 \item{env}{The environment in which to evaluate \code{expr}.}
 

package.json

@@ -1,76 +0,0 @@
-{
-  "name": "@types/shiny",
-  "private": true,
-  "version": "1.6.0",
-  "main": "",
-  "types": "srcts/types/shiny/index.d.ts",
-  "engines": {
-    "node": ">= 14",
-    "yarn": ">= 1.22"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/preset-env": "^7.14.2",
-    "@babel/preset-typescript": "^7.13.0",
-    "@babel/runtime": "^7.14.0",
-    "@testing-library/dom": "^7.31.0",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/user-event": "^13.1.9",
-    "@types/bootstrap": "3.4.0",
-    "@types/bootstrap-datepicker": "0.0.14",
-    "@types/datatables.net": "^1.10.19",
-    "@types/ion-rangeslider": "2.3.0",
-    "@types/jest": "^26.0.23",
-    "@types/jquery": "^3.5.5",
-    "@types/lodash": "^4.14.170",
-    "@types/node": "^15.6.1",
-    "@types/selectize": "0.12.34",
-    "@typescript-eslint/eslint-plugin": "^4.25.0",
-    "@typescript-eslint/parser": "^4.25.0",
-    "bootstrap-datepicker": "1.9.0",
-    "browserslist": "^4.16.6",
-    "esbuild": "^0.12.4",
-    "esbuild-plugin-babel": "0.2.3",
-    "esbuild-plugin-globals": "^0.1.1",
-    "eslint": "^7.27.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-jest": "^24.3.6",
-    "eslint-plugin-jest-dom": "^3.9.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "ion-rangeslider": "2.3.1",
-    "jest": "^26.6.3",
-    "jquery": "3.6.0",
-    "madge": "^4.0.2",
-    "node-gyp": "^8.1.0",
-    "phantomjs-prebuilt": "^2.1.16",
-    "prettier": "2.3.0",
-    "readcontrol": "^1.0.0",
-    "replace": "^1.2.1",
-    "selectize": "0.12.4",
-    "strftime": "0.9.2",
-    "ts-jest": "^26",
-    "type-coverage": "^2.17.5",
-    "typescript": "~4.1.5"
-  },
-  "scripts": {
-    "watch": "yarn run build_shiny --watch",
-    "build": "yarn run build_shiny && yarn run bundle_external_libs",
-    "build_shiny": "yarn run checks && yarn run bundle_shiny",
-    "bundle_shiny": "node srcts/build/shiny.mjs",
-    "circular_dep_image": "madge --circular --extensions ts --image madge.svg srcts/src",
-    "bundle_external_libs": "node srcts/build/external_libs.mjs",
-    "test": "jest --coverage",
-    "test_phantom": "echo '\n\t!! Must manually stop phantomjs test !!\n\n' && yarn bundle_shiny && phantomjs --debug=yes ../inst/www/shared/shiny.js",
-    "lint": "eslint --fix --ext .ts srcts/src",
-    "typescript-check": "tsc -p tsconfig.json",
-    "type-check": "type-coverage -p tsconfig.json --detail --at-least 85",
-    "import-check": "madge --circular --extensions ts srcts/src",
-    "checks": "yarn run lint && yarn run typescript-check && yarn run type-check && yarn run import-check"
-  },
-  "dependencies": {
-    "core-js": "^3.13.0",
-    "lodash": "^4.17.21",
-    "util-inspect": "https://github.com/deecewan/browser-util-inspect#c0b4350df4378ffd743e8c36dd3898ce3992823e"
-  }
-}

srcts/.eslintrc.yml

@@ -25,8 +25,6 @@ rules:
     - off
   "@typescript-eslint/no-explicit-any":
     - off
-  "@typescript-eslint/explicit-module-boundary-types":
-    - error
   camelcase:
     - error
   default-case:

srcts/.gitignore

@@ -0,0 +1,9 @@
+node_modules/
+.cache
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+coverage/

srcts/.yarn/sdks/eslint/bin/eslint.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.js";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/bin/eslint.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint/bin/eslint.js your application uses
+module.exports = absRequire(`eslint/bin/eslint.js`);

srcts/.yarn/sdks/eslint/lib/api.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.js";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/lib/api.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint/lib/api.js your application uses
+module.exports = absRequire(`eslint/lib/api.js`);

srcts/.yarn/sdks/eslint/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "eslint",
+  "version": "7.19.0-pnpify",
+  "main": "./lib/api.js",
+  "type": "commonjs"
+}

srcts/.yarn/sdks/integrations.yml

@@ -0,0 +1,5 @@
+# This file is automatically generated by PnPify.
+# Manual changes will be lost!
+
+integrations:
+  - vscode

srcts/.yarn/sdks/prettier/index.js

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve, dirname} = require(`path`);
+
+const relPnpApiPath = "../../../.pnp.js";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier/index.js
+    require(absPnpApiPath).setup();
+  }
+
+  const pnpifyResolution = require.resolve(`@yarnpkg/pnpify`, {paths: [dirname(absPnpApiPath)]});
+  if (typeof global[`__yarnpkg_sdk_is_using_pnpify__`] === `undefined`) {
+    Object.defineProperty(global, `__yarnpkg_sdk_is_using_pnpify__`, {configurable: true, value: true});
+
+    process.env.NODE_OPTIONS += ` -r ${pnpifyResolution}`;
+
+    // Apply PnPify to the current process
+    absRequire(pnpifyResolution).patchFs();
+  }
+}
+
+// Defer to the real prettier/index.js your application uses
+module.exports = absRequire(`prettier/index.js`);

srcts/.yarn/sdks/prettier/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "prettier",
+  "version": "2.2.1-pnpify",
+  "main": "./index.js",
+  "type": "commonjs"
+}

srcts/.yarn/sdks/typescript/bin/tsc

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.js";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/bin/tsc
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/bin/tsc your application uses
+module.exports = absRequire(`typescript/bin/tsc`);

srcts/.yarn/sdks/typescript/bin/tsserver

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.js";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/bin/tsserver
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/bin/tsserver your application uses
+module.exports = absRequire(`typescript/bin/tsserver`);

srcts/.yarn/sdks/typescript/lib/tsc.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.js";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/tsc.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/lib/tsc.js your application uses
+module.exports = absRequire(`typescript/lib/tsc.js`);

srcts/.yarn/sdks/typescript/lib/tsserver.js

@@ -0,0 +1,111 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.js";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+const moduleWrapper = tsserver => {
+  const {isAbsolute} = require(`path`);
+  const pnpApi = require(`pnpapi`);
+
+  const dependencyTreeRoots = new Set(pnpApi.getDependencyTreeRoots().map(locator => {
+    return `${locator.name}@${locator.reference}`;
+  }));
+
+  // VSCode sends the zip paths to TS using the "zip://" prefix, that TS
+  // doesn't understand. This layer makes sure to remove the protocol
+  // before forwarding it to TS, and to add it back on all returned paths.
+
+  function toEditorPath(str) {
+    // We add the `zip:` prefix to both `.zip/` paths and virtual paths
+    if (isAbsolute(str) && !str.match(/^\^zip:/) && (str.match(/\.zip\//) || str.match(/\$\$virtual\//))) {
+      // We also take the opportunity to turn virtual paths into physical ones;
+      // this makes is much easier to work with workspaces that list peer
+      // dependencies, since otherwise Ctrl+Click would bring us to the virtual
+      // file instances instead of the real ones.
+      //
+      // We only do this to modules owned by the the dependency tree roots.
+      // This avoids breaking the resolution when jumping inside a vendor
+      // with peer dep (otherwise jumping into react-dom would show resolution
+      // errors on react).
+      //
+      const resolved = pnpApi.resolveVirtual(str);
+      if (resolved) {
+        const locator = pnpApi.findPackageLocator(resolved);
+        if (locator && dependencyTreeRoots.has(`${locator.name}@${locator.reference}`)) {
+         str = resolved;
+        }
+      }
+
+      str = str.replace(/\\/g, `/`)
+      str = str.replace(/^\/?/, `/`);
+
+      // Absolute VSCode `Uri.fsPath`s need to start with a slash.
+      // VSCode only adds it automatically for supported schemes,
+      // so we have to do it manually for the `zip` scheme.
+      // The path needs to start with a caret otherwise VSCode doesn't handle the protocol
+      //
+      // Ref: https://github.com/microsoft/vscode/issues/105014#issuecomment-686760910
+      //
+      if (str.match(/\.zip\//)) {
+        str = `${isVSCode ? `^` : ``}zip:${str}`;
+      }
+    }
+
+    return str;
+  }
+
+  function fromEditorPath(str) {
+    return process.platform === `win32`
+      ? str.replace(/^\^?zip:\//, ``)
+      : str.replace(/^\^?zip:/, ``);
+  }
+
+  // And here is the point where we hijack the VSCode <-> TS communications
+  // by adding ourselves in the middle. We locate everything that looks
+  // like an absolute path of ours and normalize it.
+
+  const Session = tsserver.server.Session;
+  const {onMessage: originalOnMessage, send: originalSend} = Session.prototype;
+  let isVSCode = false;
+
+  return Object.assign(Session.prototype, {
+    onMessage(/** @type {string} */ message) {
+      const parsedMessage = JSON.parse(message)
+
+      if (
+        parsedMessage != null &&
+        typeof parsedMessage === `object` &&
+        parsedMessage.arguments &&
+        parsedMessage.arguments.hostInfo === `vscode`
+      ) {
+        isVSCode = true;
+      }
+
+      return originalOnMessage.call(this, JSON.stringify(parsedMessage, (key, value) => {
+        return typeof value === `string` ? fromEditorPath(value) : value;
+      }));
+    },
+
+    send(/** @type {any} */ msg) {
+      return originalSend.call(this, JSON.parse(JSON.stringify(msg, (key, value) => {
+        return typeof value === `string` ? toEditorPath(value) : value;
+      })));
+    }
+  });
+};
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/tsserver.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/lib/tsserver.js your application uses
+module.exports = moduleWrapper(absRequire(`typescript/lib/tsserver.js`));

srcts/.yarn/sdks/typescript/lib/typescript.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.js";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/typescript.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/lib/typescript.js your application uses
+module.exports = absRequire(`typescript/lib/typescript.js`);

srcts/.yarn/sdks/typescript/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "typescript",
+  "version": "4.1.5-pnpify",
+  "main": "./lib/typescript.js",
+  "type": "commonjs"
+}

srcts/.yarnrc.yml

@@ -3,7 +3,5 @@ nodeLinker: node-modules
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
     spec: "https://github.com/mskelton/yarn-plugin-outdated/raw/main/bundles/@yarnpkg/plugin-outdated.js"
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
 
 yarnPath: .yarn/releases/yarn-2.4.0.cjs

srcts/TODO.md

@@ -36,67 +36,19 @@
   * √ Verify it works on phantomjs / shinytest
 * √ Set up initial jest tests
 * √ Use a global shim to avoid importing jquery directly, but make testing easy to test
-* Update the /tools/update*.R scripts to produce a version and install node dependencies
-  * √ jquery
-  * √ ion range slider
-  * √ selectize
-  * √ strftime
-  * √ bootstrap date picker
-  * font awesome?
-  * bootstrap accessibility plugin?
-
-# Round #2
-* Convert registered bindings
-  * √ Input bindings
-  * √ Output bindings
-* Add default value to `subscribe(callback)` callback function of `false`. B/c if the value was not provided, it was not truthy, therefore equivalent to `false`.
-  * √ radio
-  * √ checkboxgroup
-  * √ daterange
-  * √ actionbutton
-  * √ bootstraptabinput
-* √ snake_case to camelCase conversions.
-* √ globally import strftime from `window.strftime`
-* Remove `evt` from jQuery.on callbacks where `evt` was not used.
-  * √ checkbox.subscribe
-  * √ checkboxgroup.subscribe
-  * √ radio.subscribe
-  * √ slider.subscribe
-  * √ date.subscribe
-  * √ selectInput.subscribe
-  * √ actionButton.subscribe
-  * √ bootstraptabinput.subscribe
-* Convert usage of `+x` to `Number(x)`
-  * https://stackoverflow.com/a/15872631/591574
-  * √ slider.getValue()
-  * √ number.getValue()
-* √ Adjust tabinput.ts `setValue()` to return either `false | void`, not `false | true`.
-  * What matters is that `false` is returned, or nothing is returned. Replaced `return true;` with `return;`
-* Questions
-  * Why does `receiveMessage(data)` sometimes have a `label`?
-  * Should we have a update datatables script?
-
 
 # Later TODO
 
-* Use --strictNullChecks in tsconfig.json
-
-* Make `_*()` methods `private *()`
-* √ Each _file_ will be pulled out as possible into smaller files in separate PRs
-* √ Convert `FileProcessor` to a true class definition
+* Each _file_ will be pulled out as possible into smaller files in separate PRs
+* Convert `FileProcessor` to a true class definition
 * Break up `./utils` into many files
-  * √ Remove any `: any` types
-* √ Make `@typescript-eslint/explicit-module-boundary-types` an error
-* √ Fix all `// eslint-disable-next-line no-prototype-builtins` lines
+  * Remove any `: any` types
+* Make `@typescript-eslint/explicit-module-boundary-types` an error
+* Fix all `// eslint-disable-next-line no-prototype-builtins` lines
 * TypeScript other shiny files (ex: showcasemode)
-* √ Completely remove `parcel` from `./package.json` and only use `esbuild`
-* √ Delete 'shiny-es5' files
+* Completely remove `parcel` from `./package.json` and only use `esbuild`
+* Delete 'shiny-es5' files
 * Delete 'old' folder
-* _Uglify_ js files (like in previous Gruntfile.js)
-  * datepicker
-  * ionrangeslider
-  * selectize
-
 
 
 # Eventual TODO

srcts/babel.config.json

@@ -5,7 +5,7 @@
       "@babel/preset-env",
       {
         "useBuiltIns": "usage",
-        "corejs": "3.12"
+        "corejs": "3.9"
       }
     ]
   ],

srcts/build/shiny.mjs

@@ -1,72 +0,0 @@
-// This build script must be executed from the root repo directory via
-// ```
-// yarn build
-// ```
-
-import esbuild from "esbuild";
-import babel from "esbuild-plugin-babel";
-import readcontrol from "readcontrol";
-import process from "process";
-import globalsPlugin from "esbuild-plugin-globals";
-
-async function buildFile(
-  fileName,
-  extraOpts = {},
-  strSize = "shiny.min.js".length
-) {
-  let watch = process.argv.length >= 3 && process.argv[2] == "--watch";
-  let incremental = false;
-
-  let printName = fileName;
-
-  while (printName.length < strSize) {
-    printName = printName + " ";
-  }
-
-  const onRebuild = function (error, result) {
-    if (error) {
-      console.error(printName, "watch build failed:\n", error);
-    } else {
-      console.log("√ -", printName, "-", new Date().toJSON());
-    }
-    return;
-  };
-
-  if (watch) {
-    incremental = true;
-    watch = {
-      onRebuild: onRebuild,
-    };
-  }
-
-  const outdir = "./inst/www/shared/";
-
-  console.log("Building " + fileName);
-  await esbuild.build({
-    outfile: outdir + fileName,
-    entryPoints: ["srcts/src/index.ts"],
-    bundle: true,
-    incremental: incremental,
-    watch: watch,
-    plugins: [
-      globalsPlugin({
-        jquery: "window.jQuery",
-        //// Loaded dynamically. MUST use `window.strftime` within code
-        // strftime: "window.strftime",
-      }),
-      babel(),
-    ],
-    target: "es5",
-    sourcemap: true,
-    define: {
-      "process.env.SHINY_VERSION": `"${
-        readcontrol.readSync("./DESCRIPTION").version
-      }"`,
-    },
-    ...extraOpts,
-  });
-  onRebuild();
-}
-
-buildFile("shiny.js");
-buildFile("shiny.min.js", { minify: true });

srcts/esbuild.config.mjs

@@ -0,0 +1,40 @@
+import esbuild from "esbuild";
+import babel from "esbuild-plugin-babel";
+import readcontrol from "readcontrol";
+import process from "process";
+import globalsPlugin from "esbuild-plugin-globals";
+
+let watch = process.argv.length >= 3 && process.argv[2] == "--watch";
+
+let outdir = "../inst/www/shared/";
+let opts = {
+  entryPoints: ["src/index.ts"],
+  bundle: true,
+  watch: watch,
+  plugins: [
+    globalsPlugin({
+      jquery: "window.jQuery",
+    }),
+    babel(),
+  ],
+  target: "es5",
+  sourcemap: true,
+  define: {
+    "process.env.SHINY_VERSION": `"${
+      readcontrol.readSync("../DESCRIPTION").version
+    }"`,
+  },
+};
+
+console.log("Building shiny.js");
+await esbuild.build({
+  ...opts,
+  outfile: outdir + "shiny.js",
+});
+
+console.log("Building shiny.min.js");
+await esbuild.build({
+  ...opts,
+  outfile: outdir + "shiny.min.js",
+  minify: true,
+});

srcts/esbuild.external_libs.mjs

@@ -1,16 +1,12 @@
-// This build script must be executed from the root repo directory via
-// ```
-// yarn build
-// ```
-
-import { readdirSync, unlinkSync, writeFileSync } from "fs";
+import {readdirSync, unlinkSync, writeFileSync} from "fs";
 import esbuild from "esbuild";
 import globalsPlugin from "esbuild-plugin-globals";
 
 // import process from "process";
 // let watch = process.argv.length >= 3 && process.argv[2] == "--watch";
 
-let instdir = "./inst/";
+let instdir = "../inst/";
+let outdir = instdir + "/www/shared/";
 
 let opts = {
   bundle: false,
@@ -20,32 +16,27 @@ let opts = {
 };
 
 console.log("Building datepicker");
-const localeFiles = readdirSync(instdir + "www/shared/datepicker/js/locales/");
+const locale_files = readdirSync(instdir + "www/shared/datepicker/js/locales/")
 
-let requireFiles = localeFiles
-  .map(function (filename) {
-    return `require("./locales/${filename}");`;
-  })
-  .join("\n");
+let require_files = locale_files.map(function(filename) {
+  return `require("./locales/${ filename }");`;
+}).join("\n");
 
 let tmpfile = instdir + "www/shared/datepicker/js/temp.js";
-
-writeFileSync(
-  tmpfile,
-  `require("./bootstrap-datepicker.js");
-${requireFiles}`
-);
+writeFileSync(tmpfile,
+`require("./bootstrap-datepicker.js");
+${require_files}`)
 await esbuild.build({
   ...opts,
-  plugins: [
+  plugins:[
     globalsPlugin({
       jquery: "window.jQuery",
-    }),
+    })
   ],
   bundle: true,
   entryPoints: [tmpfile],
   outfile: instdir + "www/shared/datepicker/js/bootstrap-datepicker.min.js",
-  external: ["jquery"],
+  external: ['jquery'],
   minify: true,
 });
 // Clean up
@@ -54,7 +45,9 @@ unlinkSync(tmpfile);
 console.log("Building ionrangeslider");
 await esbuild.build({
   ...opts,
-  entryPoints: [instdir + "www/shared/ionrangeslider/js/ion.rangeSlider.js"],
+  entryPoints: [
+    instdir + "www/shared/ionrangeslider/js/ion.rangeSlider.js"
+  ],
   outfile: instdir + "www/shared/ionrangeslider/js/ion.rangeSlider.min.js",
   minify: true,
 });
@@ -63,10 +56,8 @@ console.log("Building selectize");
 await esbuild.build({
   ...opts,
   entryPoints: [
-    instdir + "www/shared/selectize/accessibility/js/selectize-plugin-a11y.js",
+    instdir + "www/shared/selectize/accessibility/js/selectize-plugin-a11y.js"
   ],
-  outfile:
-    instdir +
-    "www/shared/selectize/accessibility/js/selectize-plugin-a11y.min.js",
+  outfile: instdir + "www/shared/selectize/accessibility/js/selectize-plugin-a11y.min.js",
   minify: true,
 });