yarn build (GitHub Actions)

.Rbuildignore

@@ -26,6 +26,7 @@
 ^\.vscode$
 ^\.madgerc$
 ^\.prettierrc\.yml$
+^babel\.config\.json$
 ^jest\.config\.js$
 ^package\.json$
 ^tsconfig\.json$

.yarnrc.yml

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

NEWS.md

@@ -2,10 +2,6 @@
 
 ## New features and improvements
 
-* Updated `selectizeInput()`'s selectize.js dependency from v0.12.4 to v0.15.2. In addition to many bug fixes and improvements, this update also adds several new [plugin options](https://selectize.dev/docs/demos/plugins). (#3875)
-
-* Shiny's CSS styling for things like `showNotification()`, `withProgress()`, `inputPanel()`, etc., now looks better with `{bslib}`'s upcoming CSS-only dark mode. (#3882)
-
 ## Bug fixes
 
 * `fileInput()` no longer has unwanted round corners applied to the `buttonLabel`. (#3879)

R/input-file.R

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

R/input-select.R

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

R/version_selectize.R

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

babel.config.json

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "usage",
+        "corejs": "3.12"
+      }
+    ]
+  ],
+  "ignore":[
+    "node_modules/core-js"
+  ]
+}

inst/www/shared/selectize/accessibility/js/selectize-plugin-a11y.min.js

@@ -1 +1 @@
-Selectize.define("selectize-plugin-a11y",function(c){var t=this,l=13;typeof t.accessibility>"u"&&(t.accessibility={}),t.accessibility.helpers={randomId:function(e){for(var r="",s=e||10,i="abcdefghijklmnopqrstuvwxyz0123456789",n=i.length,a=0;a<s;a++)r+=i[Math.floor(n*Math.random())];return r}},t.accessibility.liveRegion={$region:"",speak:function(e){var r=$("<div></div>");r.text(e),this.$region.html(r)},domListener:function(){var e=new MutationObserver(function(r){r.forEach(function(s){var i=$(s.target);if(i.hasClass("items"))if(i.hasClass("dropdown-active")){t.$control_input.attr("aria-expanded","true");for(var n=t.$dropdown_content[0].children,a=0;a<n.length;a++){var o=n[a].attributes;o.role||n[a].setAttribute("role","option"),o.id||n[a].setAttribute("id",t.accessibility.helpers.randomId())}}else t.$control_input.attr("aria-expanded","false"),t.$control_input.removeAttr("aria-activedescendant");else i.hasClass("active")&&i.attr("data-value")&&(t.$control_input.attr("aria-activedescendant",i.attr("id")),t.accessibility.liveRegion.speak(i.text(),500))})});e.observe(t.$dropdown[0],{attributes:!0,attributeFilter:["class"],subtree:!0,attributeOldValue:!0}),e.observe(t.$control[0],{attributes:!0,attributeFilter:["class"]}),e.observe(t.$control_input[0],{attributes:!0,attributeFilter:["value"]})},setAttributes:function(){this.$region.attr({"aria-live":"assertive",role:"log","aria-relevant":"additions","aria-atomic":"true"})},setStyles:function(){this.$region.css({position:"absolute",width:"1px",height:"1px","margin-top":"-1px",clip:"rect(1px, 1px, 1px, 1px)",overflow:"hidden"})},init:function(){this.$region=$("<div>"),this.setAttributes(),this.setStyles(),$("body").append(this.$region),this.domListener()}},this.setup=function(){var e=t.setup;return function(){e.apply(this,arguments);var r=t.accessibility.helpers.randomId(),s=t.accessibility.helpers.randomId();t.$control.on("keydown",function(i){i.keyCode===l&&(t.settings.openOnFocus?(t.settings.openOnFocus=!1,t.focus(),setTimeout(function(){t.settings.openOnFocus=!0},0)):t.focus())}),t.$control_input.attr({role:"combobox","aria-expanded":"false",haspopup:"listbox","aria-owns":s,"aria-label":t.$wrapper.closest("[data-accessibility-selectize-label]").attr("data-accessibility-selectize-label")}),t.$dropdown_content.attr({role:"listbox",id:s}),t.accessibility.liveRegion.init()}}(),this.destroy=function(){var e=t.destroy;return function(){return t.accessibility.liveRegion.$region.remove(),e.apply(this,arguments)}}()});
+Selectize.define("selectize-plugin-a11y",function(c){var t=this,l=13;typeof t.accessibility=="undefined"&&(t.accessibility={}),t.accessibility.helpers={randomId:function(e){for(var r="",s=e||10,i="abcdefghijklmnopqrstuvwxyz0123456789",n=i.length,a=0;a<s;a++)r+=i[Math.floor(n*Math.random())];return r}},t.accessibility.liveRegion={$region:"",speak:function(e){var r=$("<div></div>");r.text(e),this.$region.html(r)},domListener:function(){var e=new MutationObserver(function(r){r.forEach(function(s){var i=$(s.target);if(i.hasClass("items"))if(i.hasClass("dropdown-active")){t.$control_input.attr("aria-expanded","true");for(var n=t.$dropdown_content[0].children,a=0;a<n.length;a++){var o=n[a].attributes;o.role||n[a].setAttribute("role","option"),o.id||n[a].setAttribute("id",t.accessibility.helpers.randomId())}}else t.$control_input.attr("aria-expanded","false"),t.$control_input.removeAttr("aria-activedescendant");else i.hasClass("active")&&i.attr("data-value")&&(t.$control_input.attr("aria-activedescendant",i.attr("id")),t.accessibility.liveRegion.speak(i.text(),500))})});e.observe(t.$dropdown[0],{attributes:!0,attributeFilter:["class"],subtree:!0,attributeOldValue:!0}),e.observe(t.$control[0],{attributes:!0,attributeFilter:["class"]}),e.observe(t.$control_input[0],{attributes:!0,attributeFilter:["value"]})},setAttributes:function(){this.$region.attr({"aria-live":"assertive",role:"log","aria-relevant":"additions","aria-atomic":"true"})},setStyles:function(){this.$region.css({position:"absolute",width:"1px",height:"1px","margin-top":"-1px",clip:"rect(1px, 1px, 1px, 1px)",overflow:"hidden"})},init:function(){this.$region=$("<div>"),this.setAttributes(),this.setStyles(),$("body").append(this.$region),this.domListener()}},this.setup=function(){var e=t.setup;return function(){e.apply(this,arguments);var r=t.accessibility.helpers.randomId(),s=t.accessibility.helpers.randomId();t.$control.on("keydown",function(i){i.keyCode===l&&(t.settings.openOnFocus?(t.settings.openOnFocus=!1,t.focus(),setTimeout(function(){t.settings.openOnFocus=!0},0)):t.focus())}),t.$control_input.attr({role:"combobox","aria-expanded":"false",haspopup:"listbox","aria-owns":s,"aria-label":t.$wrapper.closest("[data-accessibility-selectize-label]").attr("data-accessibility-selectize-label")}),t.$dropdown_content.attr({role:"listbox",id:s}),t.accessibility.liveRegion.init()}}(),this.destroy=function(){var e=t.destroy;return function(){return t.accessibility.liveRegion.$region.remove(),e.apply(this,arguments)}}()});

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

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

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

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

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

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

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

@@ -1,24 +1,20 @@
-.#{$selectize}-dropdown.plugin-dropdown_header {
-  .#{$selectize}-dropdown-header {
-    position: relative;
-    padding: ($select-padding-dropdown-item-y * 2)
-      $select-padding-dropdown-item-x;
-    border-bottom: 1px solid $select-color-border;
-    background: RGBA($select-color-dropdown, 0.15);
-    border-radius: $select-border-radius $select-border-radius 0 0;
-  }
-  .#{$selectize}-dropdown-header-close {
-    position: absolute;
-    right: $select-padding-dropdown-item-x;
-    top: 50%;
-    color: $select-color-text;
-    opacity: 0.4;
-    margin-top: -12px;
-    line-height: 20px;
-    font-size: 20px !important;
-    text-decoration: none;
-  }
-  .#{$selectize}-dropdown-header-close:hover {
-    color: RGB($select-color-rgb);
-  }
+.selectize-dropdown-header {
+  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,22 +1,17 @@
-.#{$selectize}-dropdown.plugin-optgroup_columns {
-  .#{$selectize}-dropdown-content {
-    display: flex;
-  }
-
+.selectize-dropdown.plugin-optgroup_columns {
   .optgroup {
-    border-right: 1px solid #f2f2f2;
-    border-top: 0 none;
-    flex-grow: 1;
-    flex-basis: 0;
-    min-width: 0;
+	border-right: 1px solid #f2f2f2;
+	border-top: 0 none;
+	float: left;
+	@include selectize-box-sizing(border-box);
   }
   .optgroup:last-child {
-    border-right: 0 none;
+	border-right: 0 none;
   }
   .optgroup:before {
-    display: none;
+	display: none;
   }
   .optgroup-header {
-    border-top: 0 none;
+	border-top: 0 none;
   }
-}
+}

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

@@ -1,38 +1,43 @@
-.#{$selectize}-control.plugin-remove_button {
-  .item {
-    display: inline-flex;
-    align-items: center;
-    padding-right: 0 !important;
+.selectize-control.plugin-remove_button {
+  [data-value] {
+	position: relative;
+	padding-right: 24px !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;
+  [data-value] .remove {
+	z-index: 1; /* fixes ie bug (see #392) */
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	width: 17px;
+	text-align: center;
+	font-weight: bold;
+	font-size: 12px;
+	color: inherit;
+	text-decoration: none;
+	vertical-align: middle;
+	display: inline-block;
+	padding: $selectize-padding-item-y 0 0 0;
+	border-left: 1px solid $selectize-color-item-border;
+	@include selectize-border-radius(0 2px 2px 0);
+	@include selectize-box-sizing(border-box);
   }
-
-  .item .remove:hover {
-    background: rgba(0, 0, 0, 0.05);
+  [data-value] .remove:hover {
+	background: rgba(0,0,0,0.05);
   }
-
-  .item.active .remove {
-    border-left-color: $select-color-item-active-border;
+  [data-value].active .remove {
+	border-left-color: $selectize-color-item-active-border;
   }
-
-  .disabled .item .remove:hover {
-    background: none;
+  .disabled [data-value] .remove:hover {
+	background: none;
   }
-
-  .disabled .item .remove {
-    border-left-color: lighten(
-      desaturate($select-color-item-border, 100%),
-      $select-lighten-disabled-item-border
-    );
+  .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,136 +1,158 @@
+/**
+ * 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>
+ */
 
-$select-font-family: inherit;
-$select-font-size: inherit;
-$select-line-height: $line-height-computed;
+$selectize-font-family: inherit !default;
+$selectize-font-size: inherit !default;
+$selectize-line-height: $line-height-computed !default;
 
-$select-color-text: $text-color;
-$select-color-highlight: rgba(255, 237, 40, 0.4);
-$select-color-input: $input-bg;
-$select-color-input-full: $input-bg;
-$select-color-input-error: $state-danger-text;
-$select-color-input-error-focus: darken($select-color-input-error, 10%);
-$select-color-disabled: $input-bg;
-$select-color-item: RGBA($select-color-text, 0.1);
-$select-color-item-border: rgba(0, 0, 0, 0);
-$select-color-item-active: $component-active-bg;
-$select-color-item-active-text: color-contrast($select-color-item-active);
-$select-color-item-active-border: rgba(0, 0, 0, 0);
-$select-color-optgroup: $dropdown-bg;
-$select-color-optgroup-text: $dropdown-header-color;
-$select-color-optgroup-border: $dropdown-divider-bg;
-$select-color-dropdown: $dropdown-bg;
-$select-color-dropdown-border-top: mix($input-border, $input-bg, 80%);
-$select-color-dropdown-item-active: $dropdown-link-hover-bg;
-$select-color-dropdown-item-active-text: $dropdown-link-hover-color;
-$select-color-dropdown-item-create-active-text: $dropdown-link-hover-color;
-$select-opacity-disabled: 0.5;
-$select-shadow-input: none;
-$select-shadow-input-focus: inset 0 1px 2px rgba(0, 0, 0, 0.15);
-$select-shadow-input-error: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-$select-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, 0.075),
-  0 0 6px lighten($select-color-input-error, 20%);
-$select-border: 1px solid $input-border;
-$select-border-radius: $input-border-radius;
+$selectize-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-width-item-border: 0px;
-$select-padding-x: $padding-base-horizontal;
-$select-padding-y: $padding-base-vertical;
-$select-padding-dropdown-item-x: $padding-base-horizontal;
-$select-padding-dropdown-item-y: 3px;
-$select-padding-item-x: 5px;
-$select-padding-item-y: 1px;
-$select-margin-item-x: 3px;
-$select-margin-item-y: 3px;
+$selectize-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-arrow-size: 5px;
-$select-arrow-color: $select-color-text;
-$select-arrow-offset: $select-padding-x + 5px;
+$selectize-arrow-size: 5px !default;
+$selectize-arrow-color: $selectize-color-text !default;
+$selectize-arrow-offset: $selectize-padding-x + 5px !default;
 
 @import "selectize";
 
-.#{$selectize}-dropdown,
-.#{$selectize}-dropdown.form-control {
-  height: auto;
-  padding: 0;
-  margin: 2px 0 0 0;
-  z-index: $zindex-dropdown;
-  background: $select-color-dropdown;
-  border: 1px solid $dropdown-fallback-border;
-  border: 1px solid $dropdown-border;
-  border-radius: $border-radius-base;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+//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 {
-  .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-emptyoptionlabel {
-	text-align: center;
-}
-
-.#{$selectize}-input {
-  min-height: $input-height-base;
-
-  &.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;
+.selectize-dropdown {
+    .optgroup-header {
+        font-size: $font-size-small;
+        line-height: $line-height-base;
     }
-    .#{$selectize}-input > div {
-      border-radius: $select-border-radius - 1px;
+    .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;
     }
-  }
 }
 
-.form-control.#{$selectize}-control {
-  padding: 0;
-  height: auto;
-  border: none;
-  background: none;
-  box-shadow: none;
-  border-radius: 0;
+.selectize-dropdown-content {
+    padding: 5px 0;
+}
+
+.selectize-dropdown-header {
+    padding: $selectize-padding-dropdown-item-y * 2 $selectize-padding-dropdown-item-x;
+}
+
+.selectize-input {
+    min-height: $input-height-base;
+
+    &.dropdown-active {
+        @include selectize-border-radius ($selectize-border-radius);
+    }
+    &.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}");
+    }
+}
+
+.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);
 }

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

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

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

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

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

@@ -1,71 +1,84 @@
-$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;
+/**
+ * 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>
+ */
 
-@import "selectize.scss";
+@import "selectize";
 
-.#{$selectize}-control {
+$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 {
   &.multi {
-    .#{$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;
+	.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);
 
-        &,
-        .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);
-        }
-      }
-    }
+		&, .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);
+		}
+	  }
+	}
   }
   &.single {
-    .#{$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-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}-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: $select-padding-dropdown-item-y + 2px;
-    font-weight: bold;
-    font-size: 0.85em;
+	padding-top: $selectize-padding-dropdown-item-y + 2px;
+	font-weight: bold;
+	font-size: 0.85em;
   }
   .optgroup {
-    border-top: 1px solid $select-color-dropdown-border-top;
-    &:first-child {
-      border-top: 0 none;
-    }
+	border-top: 1px solid $selectize-color-dropdown-border-top;
+	&:first-child {
+	  border-top: 0 none;
+	}
   }
-}
+}

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

@@ -1,364 +1,300 @@
-@use "sass:math";
-
 // base styles
-$selectize: "selectize" !default;
-$select-font-family: inherit !default;
-$select-font-smoothing: inherit !default;
-$select-font-size: 13px !default;
-$select-line-height: 18px !default;
 
-$select-color-rgb: 0,0,0 !default;
-$select-color-text: RGBA($select-color-rgb, 0.83) !default;
-$select-color-border: #d0d0d0 !default;
-$select-color-highlight: rgba(125, 168, 208, 0.2) !default;
-$select-color-input: #fff !default;
-$select-color-input-full: $select-color-input !default;
-$select-color-disabled: #fafafa !default;
-$select-color-item: #f2f2f2 !default;
-$select-color-item-text: $select-color-text !default;
-$select-color-item-border: #d0d0d0 !default;
-$select-color-item-active: #e8e8e8 !default;
-$select-color-item-active-text: $select-color-text !default;
-$select-color-item-active-border: #cacaca !default;
-$select-color-dropdown: #fff !default;
-$select-color-dropdown-border: $select-color-border !default;
-$select-color-dropdown-border-top: #f0f0f0 !default;
-$select-color-dropdown-item-active: #f5fafd !default;
-$select-color-dropdown-item-active-text: #495c68 !default;
-$select-color-dropdown-item-create-text: RGBA($select-color-rgb, 0.5) !default;
-$select-color-dropdown-item-create-active-text: $select-color-dropdown-item-active-text !default;
-$select-color-optgroup: $select-color-dropdown !default;
-$select-color-optgroup-text: $select-color-text !default;
-$select-lighten-disabled-item: 30% !default;
-$select-lighten-disabled-item-text: 30% !default;
-$select-lighten-disabled-item-border: 30% !default;
-$select-opacity-disabled: 0.5 !default;
+$selectize-font-family: inherit !default;
+$selectize-font-smoothing: inherit !default;
+$selectize-font-size: 13px !default;
+$selectize-line-height: 18px !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-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-width-item-border: 0px !default;
-$select-max-height-dropdown: 200px !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-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-width-item-border: 0 !default;
+$selectize-max-height-dropdown: 200px !default;
 
-$select-arrow-size: 5px !default;
-$select-arrow-color: #808080 !default;
-$select-arrow-offset: 15px !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-caret-margin: 0 0px !default;
-$select-caret-margin-rtl: 0 4px 0 -2px !default;
+$selectize-arrow-size: 5px !default;
+$selectize-arrow-color: #808080 !default;
+$selectize-arrow-offset: 15px !default;
 
-$select-spinner-size: 30px;
-$select-spinner-border-size: 5px;
-$select-spinner-border-color: $select-color-border;
+$selectize-caret-margin: 0 2px 0 0 !default;
+$selectize-caret-margin-rtl: 0 4px 0 -2px !default;
 
-@mixin selectize-vertical-gradient($color-top, $color-bottom) {
+@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){
   background-color: mix($color-top, $color-bottom, 60%);
-  background-image: linear-gradient(to bottom, $color-top, $color-bottom);
+  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-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
 }
 
-@import "plugins/drag_drop.scss";
-@import "plugins/dropdown_header.scss";
-@import "plugins/optgroup_columns.scss";
-@import "plugins/remove_button.scss";
-@import "plugins/clear_button.scss";
-@import "plugins/auto_position.scss";
-
-.#{$selectize}-control {
+.selectize-control {
   position: relative;
 }
 
-.#{$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-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}-input,
-.#{$selectize}-control.single .#{$selectize}-input.input-active {
-  background: $select-color-input;
+.selectize-input, .selectize-control.single .selectize-input.input-active {
+  background: $selectize-color-input;
   cursor: text;
   display: inline-block;
 }
 
-.#{$selectize}-input {
-  border: $select-border;
-  padding: $select-padding-y $select-padding-x;
+.selectize-input {
+  border: $selectize-border;
+  padding: $selectize-padding-y $selectize-padding-x;
   display: inline-block;
   width: 100%;
-  // overflow: hidden;
+  overflow: hidden;
   position: relative;
   z-index: 1;
-  box-sizing: border-box;
-  box-shadow: $select-shadow-input;
-  border-radius: $select-border-radius;
+  @include selectize-box-sizing(border-box);
+  @include selectize-box-shadow($selectize-shadow-input);
+  @include selectize-border-radius($selectize-border-radius);
 
-  .#{$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;
+  .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;
   }
 
   &.full {
-    background-color: $select-color-input-full;
+	background-color: $selectize-color-input-full;
   }
-  &.disabled,
-  &.disabled * {
-    cursor: default !important;
+  &.disabled, &.disabled * {
+	cursor: default !important;
   }
   &.focus {
-    box-shadow: $select-shadow-input-focus;
+	@include selectize-box-shadow($selectize-shadow-input-focus);
   }
   &.dropdown-active {
-    border-radius: $select-border-radius $select-border-radius 0 0;
+	@include selectize-border-radius($selectize-border-radius $selectize-border-radius 0 0);
   }
 
   > * {
-    vertical-align: baseline;
-    display: inline-block;
-    zoom: 1;
+	vertical-align: baseline;
+	display: -moz-inline-stack;
+	display: inline-block;
+	zoom: 1;
+	*display: inline;
   }
-  .#{$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;
+  .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;
 
-    &.active {
-      background: $select-color-item-active;
-      color: $select-color-item-active-text;
-      border: $select-width-item-border solid $select-color-item-active-border;
-    }
+	&.active {
+	  background: $selectize-color-item-active;
+	  color: $selectize-color-item-active-text;
+	  border: $selectize-width-item-border solid $selectize-color-item-active-border;
+	}
   }
-  .#{$selectize}-control.multi &.disabled > div {
-    &,
-    &.active {
-      color: lighten(gray, $select-lighten-disabled-item-text);
-      background: lighten(gray, $select-lighten-disabled-item);
-      border: $select-width-item-border solid
-        lighten(gray, $select-lighten-disabled-item-border);
-    }
+  .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);
+	}
   }
   > 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: 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;
+	&::-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; }
   }
 }
 
-.#{$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: $select-color-dropdown-border-top;
+  background: $selectize-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: $select-dropdown-border;
-  background: $select-color-dropdown;
+  border: $selectize-dropdown-border;
+  background: $selectize-color-dropdown;
   margin: -1px 0 0 0;
   border-top: 0 none;
-  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;
+  @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);
 
   [data-selectable] {
-    cursor: pointer;
-    overflow: hidden;
-    .highlight {
-      background: $select-color-highlight;
-      border-radius: 1px;
-    }
+	cursor: pointer;
+	overflow: hidden;
+	.highlight {
+	  background: $selectize-color-highlight;
+	  @include selectize-border-radius(1px);
+	}
   }
-  .option,
-  .optgroup-header,
-  .no-results,
-  .create {
-    padding: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
+  .option, .optgroup-header {
+	padding: $selectize-padding-dropdown-item-y $selectize-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;
-    cursor: pointer;
+	opacity: 1;
   }
   .optgroup:first-child .optgroup-header {
-    border-top: 0 none;
+	border-top: 0 none;
   }
   .optgroup-header {
-    color: $select-color-optgroup-text;
-    background: $select-color-optgroup;
-    cursor: default;
+	color: $selectize-color-optgroup-text;
+	background: $selectize-color-optgroup;
+	cursor: default;
   }
   .active {
-    background-color: $select-color-item-active;
-    color: $select-color-item-active-text;
-    &.create {
-      color: $select-color-dropdown-item-create-active-text;
-    }
-  }
-
-  .selected {
-    background-color: $select-color-item-active;
-    color: $select-color-item-active-text;
+	background-color: $selectize-color-dropdown-item-active;
+	color: $selectize-color-dropdown-item-active-text;
+	&.create {
+	  color: $selectize-color-dropdown-item-create-active-text;
+	}
   }
   .create {
-    color: $select-color-dropdown-item-create-text;
-  }
-
-  .active:not(.selected) {
-    background: $select-color-dropdown-item-active;
-    color: $select-color-dropdown-item-active-text;
+	color: $selectize-color-dropdown-item-create-text;
   }
 }
 
-.#{$selectize}-dropdown-content {
+.selectize-dropdown-content {
   overflow-y: auto;
   overflow-x: hidden;
-  max-height: $select-max-height-dropdown;
-  overflow-scrolling: touch;
+  max-height: $selectize-max-height-dropdown;
+  -webkit-overflow-scrolling: touch;
 }
 
-.#{$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;
+.selectize-control.single .selectize-input {
+  &, input { cursor: pointer; }
+  &.input-active, &.input-active input { cursor: text; }
 
   &:after {
-    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;
+	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;
   }
-  @keyframes lds-dual-ring {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
+  &.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;
   }
 }
 
-.#{$selectize}-control.single .#{$selectize}-input {
-  &,
-  input {
-    cursor: pointer;
+.selectize-control.rtl {
+  &.single .selectize-input:after {
+	left: $selectize-arrow-offset;
+	right: auto;
   }
-  &.input-active,
-  &.input-active input:not(:read-only) {
-    cursor: text;
-  }
-
-  &:not(.no-arrow):after {
-    content: " ";
-    display: block;
-    position: absolute;
-    top: 50%;
-    right: $select-arrow-offset;
-    margin-top: round(divide(-1 * $select-arrow-size, 2));
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: $select-arrow-size $select-arrow-size 0 $select-arrow-size;
-    border-color: $select-arrow-color transparent transparent transparent;
-  }
-  &:not(.no-arrow).dropdown-active:after {
-    margin-top: $select-arrow-size * -0.8;
-    border-width: 0 $select-arrow-size $select-arrow-size $select-arrow-size;
-    border-color: transparent transparent $select-arrow-color transparent;
+  .selectize-input > input {
+	margin: $selectize-caret-margin-rtl !important;
   }
 }
 
-.#{$selectize}-control.rtl {
-  text-align: right;
-  &.single .#{$selectize}-input:after {
-    left: $select-arrow-offset;
-    right: auto;
-  }
-  .#{$selectize}-input > input {
-    margin: $select-caret-margin-rtl !important;
-  }
-}
-
-.#{$selectize}-control .#{$selectize}-input.disabled {
-  opacity: $select-opacity-disabled;
-  background-color: $select-color-disabled;
+.selectize-control .selectize-input.disabled {
+  opacity: $selectize-opacity-disabled;
+  background-color: $selectize-color-disabled;
 }

inst/www/shared/shiny-testmode.js

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

inst/www/shared/shiny-testmode.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../srcts/src/utils/eval.ts", "../../../srcts/extras/shiny-testmode.ts"],
-  "sourcesContent": ["//esbuild.github.io/content-types/#direct-eval\n//tl/dr;\n// * Direct usage of `eval(\"x\")` is bad with bundled code.\n// * Instead, use indirect calls to `eval` such as `indirectEval(\"x\")`\n//   * Even just renaming the function works well enough.\n// > This is known as \"indirect eval\" because eval is not being called directly, and so does not trigger the grammatical special case for direct eval in the JavaScript VM. You can call indirect eval using any syntax at all except for an expression of the exact form eval('x'). For example, var eval2 = eval; eval2('x') and [eval][0]('x') and window.eval('x') are all indirect eval calls.\n// > When you use indirect eval, the code is evaluated in the global scope instead of in the inline scope of the caller.\n\nconst indirectEval = eval;\n\nexport { indirectEval };\n", "/* eslint-disable unicorn/filename-case */\nimport { indirectEval } from \"../src/utils/eval\";\n\n// Listen for messages from parent frame. This file is only added when the\n// shiny.testmode option is TRUE.\nwindow.addEventListener(\"message\", function (e: { data: { code: string } }) {\n  const message = e.data;\n\n  if (message.code) indirectEval(message.code);\n});\n"],
-  "mappings": ";mBAQA,IAAMA,EAAe,KCHrB,OAAO,iBAAiB,UAAW,SAAUC,EAA+B,CAC1E,IAAMC,EAAUD,EAAE,KAEdC,EAAQ,MAAMC,EAAaD,EAAQ,IAAI,CAC7C,CAAC",
+  "sourcesContent": ["//esbuild.github.io/content-types/#direct-eval\n//tl/dr;\n// * Direct usage of `eval(\"x\")` is bad with bundled code.\n// * Instead, use indirect calls to `eval` such as `indirectEval(\"x\")`\n//   * Even just renaming the function works well enough.\n// > This is known as \"indirect eval\" because eval is not being called directly, and so does not trigger the grammatical special case for direct eval in the JavaScript VM. You can call indirect eval using any syntax at all except for an expression of the exact form eval('x'). For example, var eval2 = eval; eval2('x') and [eval][0]('x') and window.eval('x') are all indirect eval calls.\n// > When you use indirect eval, the code is evaluated in the global scope instead of in the inline scope of the caller.\n\nvar indirectEval = eval;\nexport { indirectEval };", "/* eslint-disable unicorn/filename-case */\nimport { indirectEval } from \"../src/utils/eval\";\n\n// Listen for messages from parent frame. This file is only added when the\n// shiny.testmode option is TRUE.\nwindow.addEventListener(\"message\", function (e) {\n  var message = e.data;\n  if (message.code) indirectEval(message.code);\n});"],
+  "mappings": ";yBAQA,IAAIA,EAAe,KCHnB,OAAO,iBAAiB,UAAW,SAAUC,EAAG,CAC9C,IAAIC,EAAUD,EAAE,KACZC,EAAQ,MAAMC,EAAaD,EAAQ,IAAI,CAC7C,CAAC",
   "names": ["indirectEval", "e", "message", "indirectEval"]
 }

inst/www/shared/shiny_scss/bootstrap.scss

@@ -1,46 +1,43 @@
-$prefix: bs- !default; // BS5 CSS variable prefix
+$bg: $body-bg !default;
 
-// For BS3, which doesn't have these Sass variables (but has other, similar ones)
+$fg: null !default;
+$theme-colors: null !default;
+@if variable-exists('text-color') {
+  $fg: $text-color !default; // BS3
+  $theme-colors: ("primary": $brand-primary, "info": $brand-info, "warning": $brand-warning, "danger": $brand-danger) !default;
+} @else {
+  $fg: $body-color !default; // BS4
+}
+// No $border-width, $border-color, or $border-radius in BS3
 $border-width: 1px !default;
+$border-color: mix($bg, $fg, 70%) !default;
 $border-radius: $border-radius-base !default;
-$border-color: mix($body-bg, $text-color, 70%) !default;
-$primary: $brand-primary !default;
-$info: $brand-info !default;
-$warning: $brand-warning !default;
-$danger: $brand-danger !default;
 
-// No rgb CSS vars available in BS3-4
-$primary-rgb: var(--#{$prefix}primary-rgb, red($primary),green($primary),blue($primary)) !default;
-$info-rgb:    var(--#{$prefix}info-rgb, red($info), green($info), blue($info)) !default;
-$warning-rgb: var(--#{$prefix}warning-rgb, red($warning), green($warning), blue($warning)) !default;
-$danger-rgb:  var(--#{$prefix}danger-rgb, red($danger), green($danger), blue($danger)) !default;
-
-
-$shiny-emphasis-color-rgb:          var(--#{$prefix}emphasis-color-rgb, 0,0,0) !default;
-$shiny-disconnected-bg:             RGBA($shiny-emphasis-color-rgb, 0.42) !default;
-$shiny-table-na:                    RGBA($shiny-emphasis-color-rgb, 0.46) !default;
-$shiny-error-validated-color:       RGBA($shiny-emphasis-color-rgb, 0.5) !default;
-$shiny-progress-text-bg-color:      RGBA($primary-rgb, 0.05) !default;
-$shiny-input-panel-bg:              RGBA($shiny-emphasis-color-rgb, 0.04) !default;
-$shiny-input-panel-border:          $border-width solid var(--#{$prefix}border-color, $border-color) !default;
+$shiny-disconnected-bg:             mix($bg, $fg, 58%) !default;
+$shiny-table-na:                    mix($bg, $fg, 54%) !default;
+$shiny-error-validated-color:       mix($bg, $fg, 50%) !default;
+// TODO: what should this be? mix of primary and bg?
+$shiny-progress-text-bg-color:      #eef8ff !default;
+$shiny-input-panel-bg:              mix($bg, $fg, 96%) !default;
+$shiny-input-panel-border:          $border-width solid $border-color !default;
 $shiny-input-panel-border-radius:   $border-radius !default;
 $shiny-text-output-border-radius:   $border-radius !default;
-$notification-bg-color:             RGBA($shiny-emphasis-color-rgb, 0.05) !default;
-$notification-color:                $shiny-emphasis-color-rgb !default;
-$notification-border:               $border-width solid var(--#{$prefix}border-color, $border-color) !default;
+$notification-bg-color:             mix($bg, $fg, 90%) !default;
+$notification-color:                $fg !default;
+$notification-border:               $border-width solid $border-color !default;
 $notification-border-radius:        $border-radius !default;
-$notification-message-bg:           RGBA($info-rgb, 0.05) !default;
-$notification-message-color:        RGBA($info-rgb, 1) !default;
-$notification-message-border:       $border-width solid RGBA($info-rgb, 0.5) !default;
-$notification-warning-bg:           RGBA($warning-rgb, 0.05) !default;
-$notification-warning-color:        RGBA($warning-rgb, 0.9) !default;
-$notification-warning-border:       $border-width solid RGBA($warning-rgb, 0.3) !default;
-$notification-error-bg:             RGBA($danger-rgb, 0.05) !default;
-$notification-error-color:          RGBA($danger-rgb, 0.9) !default;
-$notification-error-border:         $border-width solid RGBA($warning-rgb, 0.2) !default;
-$notification-close-color:          RGBA($shiny-emphasis-color-rgb, 0.8) !default;
-$notification-close-hover-color:    RGB($shiny-emphasis-color-rgb) !default;
-$notification-content-action-color: RGB($primary-rgb) !default;
+$notification-message-bg:           mix($bg, map-get($theme-colors, "info"), 90%) !default;
+$notification-message-color:        mix($fg, map-get($theme-colors, "info"), 10%) !default;
+$notification-message-border:       $border-width solid mix($bg, map-get($theme-colors, "info"), 53%) !default;
+$notification-warning-bg:           mix($bg, map-get($theme-colors, "warning"), 90%) !default;
+$notification-warning-color:        mix($fg, map-get($theme-colors, "warning"), 10%) !default;
+$notification-warning-border:       $border-width solid mix($bg, map-get($theme-colors, "warning"), 71%) !default;
+$notification-error-bg:             mix($bg, map-get($theme-colors, "danger"), 90%) !default;
+$notification-error-color:          mix($fg, map-get($theme-colors, "danger"), 10%) !default;
+$notification-error-border:         $border-width solid mix($bg, map-get($theme-colors, "danger"), 79%) !default;
+$notification-close-color:          mix($bg, $fg, 20%) !default;
+$notification-close-hover-color:    $fg !default;
+$notification-content-action-color: map-get($theme-colors, "primary") !default;
 $datepicker-disabled-color:         $dropdown-link-disabled-color !default;
 
 // I don't think BS3 has a file input box shadow setting

inst/www/shared/shiny_scss/shiny.scss

@@ -313,6 +313,11 @@ pre.shiny-text-output {
   zoom: 1.0000001;
 }
 
+/* consistency with bootstrap.css for selectize.js */
+.selectize-control {
+  margin-bottom: 10px;
+}
+
 .shiny-frame {
   border: none;
 }

man/fileInput.Rd

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

man/selectInput.Rd

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

package.json

@@ -33,7 +33,6 @@
     "@babel/preset-typescript": "^7.13.0",
     "@babel/runtime": "^7.14.0",
     "@deanc/esbuild-plugin-postcss": "^1.0.2",
-    "@selectize/selectize": "https://github.com/selectize/selectize.js.git#e3f2e0b4aa251375bc21b5fcd8ca7d374a921f08",
     "@testing-library/dom": "^7.31.0",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/user-event": "^13.1.9",
@@ -50,6 +49,7 @@
     "caniuse-lite": "^1.0.30001312",
     "core-js": "^3.13.0",
     "esbuild": "^0.15.10",
+    "esbuild-plugin-babel": "https://github.com/schloerke/esbuild-plugin-babel#patch-2",
     "esbuild-plugin-globals": "^0.1.1",
     "esbuild-plugin-sass": "^1.0.1",
     "eslint": "^8.24.0",

srcts/README.md

@@ -150,6 +150,12 @@ All config files are located in the root folder to avoid opening two separate VS
   * Used by `prettier` to know how to adjust code when a file is saved in VSCode or within `eslint`'s linting process.
 * `yarnrc.yml`
   * Notifies `yarn` to use `yarn` v2, install `./node_modules` folder for `esbuild`, and any CLI plugins.
+* `babel.config.json`
+  * Used within `babel` transpilation of TypeScript -> JavaScript -> polyfilled JavaScript.
+  * Noteable options set:
+    * `"useBuiltIns": "usage"` - `core-js` polyfills are only added as they are _used_.
+    * `"corejs": "3.9"` - This number should match the installed `core-js` number.
+    * `"ignore":["node_modules/core-js"]` - The `core-js` library is directly ignored to [avoid being processed by `babel`](https://github.com/zloirock/core-js/issues/743#issuecomment-571983318).
 * `jest.config.js`
   * Used to configure [`jest` testing](https://jestjs.io/)
 * `package.json`
@@ -162,6 +168,7 @@ All config files are located in the root folder to avoid opening two separate VS
 * `tsconfig.json` -
   * TypeScript config file
   * Notable options set:
+    * `target: ES5` - Compile to es5, so babel has an easier job.
     * `preserveConstEnums: false` - Do no preserve enum values into the final code. (If true, produces bloat / unused code)
     * `isolatedModules: true` & `esModuleInterop: true` - Requested by `esbuild`. This [allows for `esbuild`](https://esbuild.github.io/content-types/#typescript) to safely compile the files in parallel
 

srcts/build/_build.ts

@@ -14,6 +14,10 @@ import { basename } from "path";
 // @ts-ignore; Type definitions are not found. This occurs when `strict: true` in tsconfig.json
 import readcontrol from "readcontrol";
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore; Type definitions are not found. This occurs when `strict: true` in tsconfig.json
+import babelPlugin from "esbuild-plugin-babel";
+
 const outDir = "./inst/www/shared/";
 
 type ShinyDesc = { version: string; package: string; license: string };
@@ -75,7 +79,7 @@ async function build(
   return esbuildBuild({
     incremental: incremental,
     watch: watch,
-    target: "es2020",
+    target: "es5",
     preserveSymlinks: true,
     ...opts,
   }).then((x) => {
@@ -84,4 +88,4 @@ async function build(
   });
 }
 
-export { outDir, build, shinyDesc, banner };
+export { outDir, build, shinyDesc, banner, babelPlugin };

srcts/build/extras.ts

@@ -5,12 +5,13 @@
 
 // - TypeScript -----------------------------------------------------------
 
-import { banner, build, outDir } from "./_build";
+import { banner, build, outDir, babelPlugin } from "./_build";
 
 build({
   bundle: true,
   sourcemap: true,
   minify: true,
+  plugins: [babelPlugin()],
   banner: banner,
   entryPoints: [
     "srcts/extras/shiny-autoreload.ts",

srcts/build/shiny.ts

@@ -3,7 +3,7 @@
 // yarn build
 // ```
 
-import { banner, build, outDir, shinyDesc } from "./_build";
+import { banner, build, outDir, shinyDesc, babelPlugin } from "./_build";
 import globalsPlugin from "esbuild-plugin-globals";
 import type { BuildOptions } from "esbuild";
 import { verifyJqueryImport } from "./_jquery";
@@ -18,6 +18,7 @@ const opts: BuildOptions = {
       //// Loaded dynamically. MUST use `window.strftime` within code
       // strftime: "window.strftime",
     }),
+    babelPlugin(),
   ],
   define: {
     // eslint-disable-next-line @typescript-eslint/naming-convention

srcts/src/bindings/input/selectInput.ts

@@ -2,7 +2,6 @@ import $ from "jquery";
 import { InputBinding } from "./inputBinding";
 import { $escape, hasDefinedProperty, updateLabel } from "../../utils";
 import { indirectEval } from "../../utils/eval";
-import { shinyBindAll, shinyUnbindAll } from "../../shiny/initedMethods";
 import type { NotUndefined } from "../../utils/extraTypes";
 
 type SelectHTMLElement = HTMLSelectElement & { nonempty: boolean };
@@ -284,32 +283,15 @@ class SelectInputBinding extends InputBinding {
         // @ts-expect-error; Need to type `options` keys to know exactly which values are accessed.
         options[x] = indirectEval("(" + options[x] + ")");
       });
-
-    let control = this._newSelectize($el, options);
-
+    let control = $el.selectize(options)[0].selectize as SelectizeInfo;
     // .selectize() does not really update settings; must destroy and rebuild
+
     if (update) {
       const settings = $.extend(control.settings, options);
 
       control.destroy();
-      control = this._newSelectize($el, settings);
+      control = $el.selectize(settings)[0].selectize as SelectizeInfo;
     }
-
-    return control;
-  }
-
-  protected _newSelectize(
-    $el: JQuery<HTMLSelectElement>,
-    options: SelectizeOptions
-  ): SelectizeInfo {
-    // Starting with selectize v0.15.2, $el.selectize() can prune the <select>
-    // element from the DOM, meaning that if we're already bound to it, we'll
-    // lose the binding. So if we are bound, unbind first, then rebind after.
-    // (Note this is quite similar to how Shiny.renderContent() works.)
-    const binding = $el.data("shiny-input-binding");
-    if (binding) shinyUnbindAll($el.parent());
-    const control = $el.selectize(options)[0].selectize as SelectizeInfo;
-    if (binding) shinyBindAll($el.parent());
     return control;
   }
 }

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

@@ -34,7 +34,6 @@ declare class SelectInputBinding extends InputBinding {
     unsubscribe(el: HTMLElement): void;
     initialize(el: SelectHTMLElement): void;
     protected _selectize(el: SelectHTMLElement, update?: boolean): SelectizeInfo | undefined;
-    protected _newSelectize($el: JQuery<HTMLSelectElement>, options: SelectizeOptions): SelectizeInfo;
 }
 export { SelectInputBinding };
 export type { SelectInputReceiveMessageData };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

tools/updateSelectize.R

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

yarn.lock

@@ -1828,19 +1828,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@selectize/selectize@https://github.com/selectize/selectize.js.git#e3f2e0b4aa251375bc21b5fcd8ca7d374a921f08":
-  version: 0.15.2
-  resolution: "@selectize/selectize@https://github.com/selectize/selectize.js.git#commit=e3f2e0b4aa251375bc21b5fcd8ca7d374a921f08"
-  peerDependencies:
-    jquery: ^1.7.0 || ^2 || ^3
-    jquery-ui: ^1.13.2
-  peerDependenciesMeta:
-    jquery-ui:
-      optional: true
-  checksum: ba260ba5804c16b1455ff79f9d00ce860e12ae36e29d7a5f702da6b384c9454497421b8e06fe683d10fac53e2dc6ec008da4fa129a153cbbfe5396e027eb4247
-  languageName: node
-  linkType: hard
-
 "@sinclair/typebox@npm:^0.25.16":
   version: 0.25.24
   resolution: "@sinclair/typebox@npm:0.25.24"
@@ -2197,7 +2184,6 @@ __metadata:
     "@babel/preset-typescript": ^7.13.0
     "@babel/runtime": ^7.14.0
     "@deanc/esbuild-plugin-postcss": ^1.0.2
-    "@selectize/selectize": "https://github.com/selectize/selectize.js.git#e3f2e0b4aa251375bc21b5fcd8ca7d374a921f08"
     "@testing-library/dom": ^7.31.0
     "@testing-library/jest-dom": ^5.12.0
     "@testing-library/user-event": ^13.1.9
@@ -2220,6 +2206,7 @@ __metadata:
     caniuse-lite: ^1.0.30001312
     core-js: ^3.13.0
     esbuild: ^0.15.10
+    esbuild-plugin-babel: "https://github.com/schloerke/esbuild-plugin-babel#patch-2"
     esbuild-plugin-globals: ^0.1.1
     esbuild-plugin-sass: ^1.0.1
     eslint: ^8.24.0
@@ -4223,6 +4210,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-plugin-babel@https://github.com/schloerke/esbuild-plugin-babel#patch-2":
+  version: 0.2.3
+  resolution: "esbuild-plugin-babel@https://github.com/schloerke/esbuild-plugin-babel.git#commit=40106e72776cf4e2e4da8e52926632ceed378da0"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: c89e123bc1944efcee5628ea6d8cb878384a4de5c19b4b598b660c03dd6429dd11e9120b5cbf54722331c69cb3bc25183b63ef1c28174ed44787228a44a58684
+  languageName: node
+  linkType: hard
+
 "esbuild-plugin-globals@npm:^0.1.1":
   version: 0.1.1
   resolution: "esbuild-plugin-globals@npm:0.1.1"