applied pull Choices-js#822

public/assets/scripts/choices.js

@@ -1,4 +1,4 @@
-/*! choices.js v10.2.0 | © 2022 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
+/*! choices.js v10.2.0 | © 2023 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();
@@ -229,6 +229,7 @@ var USER_DEFAULTS = {};
  */
 var Choices = /** @class */function () {
   function Choices(element, userConfig) {
+    var _a;
     if (element === void 0) {
       element = '[data-choice]';
     }
@@ -326,16 +327,8 @@ var Choices = /** @class */function () {
     }
     // Create array of choices from option elements
     if (this.passedElement.options) {
-      this.passedElement.options.forEach(function (option) {
-        _this._presetChoices.push({
-          value: option.value,
-          label: option.innerHTML,
-          selected: !!option.selected,
-          disabled: option.disabled || option.parentNode.disabled,
-          placeholder: option.value === '' || option.hasAttribute('placeholder'),
-          customProperties: (0, utils_1.parseCustomProperties)(option.dataset.customProperties)
-        });
-      });
+      var choicesFromOptions = this.passedElement.optionsAsChoices();
+      (_a = this._presetChoices).push.apply(_a, choicesFromOptions);
     }
     this._render = this._render.bind(this);
     this._onFocus = this._onFocus.bind(this);
@@ -862,6 +855,14 @@ var Choices = /** @class */function () {
     if (this.config.shouldSort) {
       groups.sort(this.config.sorter);
     }
+    // Add Choices without group first, regardless of sort, otherwise they won't be distinguishable
+    // from the last group
+    var choicesWithoutGroup = choices.filter(function (c) {
+      return c.groupId == -1;
+    });
+    if (choicesWithoutGroup.length > 0) {
+      this._createChoicesFragment(choicesWithoutGroup, fragment, false);
+    }
     groups.forEach(function (group) {
       var groupChoices = getGroupChoices(group);
       if (groupChoices.length >= 1) {
@@ -1877,11 +1878,7 @@ var Choices = /** @class */function () {
       this._highlightPosition = 0;
       this._isSearching = false;
       this._startLoading();
-      if (this._presetGroups.length) {
-        this._addPredefinedGroups(this._presetGroups);
-      } else {
-        this._addPredefinedChoices(this._presetChoices);
-      }
+      this._addPredefinedChoices(this._presetChoices);
       this._stopLoading();
     }
     if (this._isTextElement) {
@@ -2716,7 +2713,10 @@ var __importDefault = this && this.__importDefault || function (mod) {
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
+var utils_1 = __webpack_require__(799);
 var wrapped_element_1 = __importDefault(__webpack_require__(730));
+var htmlElementGuards_1 = __webpack_require__(858);
+var htmlElementGuards_2 = __webpack_require__(858);
 var WrappedSelect = /** @class */function (_super) {
   __extends(WrappedSelect, _super);
   function WrappedSelect(_a) {
@@ -2768,6 +2768,40 @@ var WrappedSelect = /** @class */function (_super) {
     enumerable: false,
     configurable: true
   });
+  WrappedSelect.prototype.optionsAsChoices = function () {
+    var choices = [];
+    for (var _i = 0, _a = Array.from(this.element.querySelectorAll(':scope > *')); _i < _a.length; _i++) {
+      var e = _a[_i];
+      if ((0, htmlElementGuards_2.isHTMLOption)(e)) {
+        choices.push(this._optionToChoice(e));
+      } else if ((0, htmlElementGuards_1.isHTMLOptgroup)(e)) {
+        choices.push(this._optgroupToChoice(e));
+      }
+      // There should only be those two in a <select> and we wouldn't care about others anyways
+    }
+
+    return choices;
+  };
+  WrappedSelect.prototype._optionToChoice = function (option) {
+    return {
+      value: option.value,
+      label: option.innerHTML,
+      selected: !!option.selected,
+      disabled: option.disabled || this.element.disabled,
+      placeholder: option.value === '' || option.hasAttribute('placeholder'),
+      customProperties: (0, utils_1.parseCustomProperties)(option.dataset.customProperties)
+    };
+  };
+  WrappedSelect.prototype._optgroupToChoice = function (optgroup) {
+    var _this = this;
+    return {
+      label: optgroup.label || '',
+      disabled: !!optgroup.disabled,
+      choices: Array.from(optgroup.querySelectorAll('option')).map(function (option) {
+        return _this._optionToChoice(option);
+      })
+    };
+  };
   WrappedSelect.prototype.appendDocFragment = function (fragment) {
     this.element.innerHTML = '';
     this.element.appendChild(fragment);
@@ -3137,6 +3171,26 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
+/***/ 858:
+/***/ (function(__unused_webpack_module, exports) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.isHTMLOptgroup = exports.isHTMLOption = void 0;
+var isHTMLOption = function (e) {
+  return e.tagName === 'OPTION';
+};
+exports.isHTMLOption = isHTMLOption;
+var isHTMLOptgroup = function (e) {
+  return e.tagName === 'OPTGROUP';
+};
+exports.isHTMLOptgroup = isHTMLOptgroup;
+
+/***/ }),
+
 /***/ 799:
 /***/ (function(__unused_webpack_module, exports) {
 
@@ -4101,7 +4155,7 @@ var templates = {
       disabled = _a.disabled;
     var opt = new Option(label, value, false, active);
     if (customProperties) {
-      opt.dataset.customProperties = "".concat(customProperties);
+      opt.dataset.customProperties = "".concat(JSON.stringify(customProperties));
     }
     opt.disabled = !!disabled;
     return opt;

public/assets/scripts/choices.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! choices.js v10.2.0 | © 2022 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
+/*! choices.js v10.2.0 | © 2023 Josh Johnson | https://github.com/jshjohnson/Choices#readme */

public/types/src/scripts/components/wrapped-select.d.ts

@@ -1,3 +1,4 @@
+import { Choice } from '../interfaces/choice';
 import { ClassNames } from '../interfaces/class-names';
 import { Item } from '../interfaces/item';
 import WrappedElement from './wrapped-element';
@@ -14,6 +15,9 @@ export default class WrappedSelect extends WrappedElement {
     get optionGroups(): Element[];
     get options(): Item[] | HTMLOptionElement[];
     set options(options: Item[] | HTMLOptionElement[]);
+    optionsAsChoices(): Partial<Choice>[];
+    _optionToChoice(option: HTMLOptionElement): Choice;
+    _optgroupToChoice(optgroup: HTMLOptGroupElement): Partial<Choice>;
     appendDocFragment(fragment: DocumentFragment): void;
 }
 //# sourceMappingURL=wrapped-select.d.ts.map