Updating CHANGELOG, tom-select 2.2.2 & building

rollup.config.js

@@ -38,7 +38,7 @@ const wildcardExternalsPlugin = (peerDependencies) => ({
     }
 });
 
-const files = glob.sync("src/React/assets/src/*controller.ts");
+const files = glob.sync('src/*/assets/src/*controller.ts');
 const packages = files.map((file) => {
     const absolutePath = path.join(__dirname, file);
     const packageData = require(pkgUp.sync({ cwd: absolutePath }));

src/Autocomplete/CHANGELOG.md

@@ -1,9 +1,5 @@
 # CHANGELOG
 
-## Unreleased
-
--   Add support for recent versions of Tom Select
-
 ## 2.6.0
 
 -   [BC BREAK]: The path to `routes.php` changed and you should update your
@@ -17,8 +13,12 @@ ux_autocomplete:
     prefix: '/autocomplete'
 ```
 
--   Fix issue where `max_results` was not passed as a Stimulus value (#538)
--   Add all possible stylesheets for tom-select to the autoimport to choose from
+-   Add support for `tom-select` version `2.2.2` and made this the minimum-supported
+    version.
+-   Added support for the `preload` TomSelect option.
+-   Fix don't add WHERE IN criteria without params (#561).
+-   Fix issue where `max_results` was not passed as a Stimulus value (#538).
+-   Add all possible stylesheets for tom-select to the autoimport to choose from.
 
 ## 2.5.0
 

src/Autocomplete/assets/dist/controller.js

@@ -22,11 +22,11 @@ function __classPrivateFieldGet(receiver, state, kind, f) {
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 }
 
-var _default_1_instances, _default_1_getCommonConfig, _default_1_createAutocomplete, _default_1_createAutocompleteWithHtmlContents, _default_1_createAutocompleteWithRemoteData, _default_1_stripTags, _default_1_mergeObjects, _default_1_createTomSelect, _default_1_dispatchEvent;
+var _instances, _getCommonConfig, _createAutocomplete, _createAutocompleteWithHtmlContents, _createAutocompleteWithRemoteData, _stripTags, _mergeObjects, _createTomSelect, _dispatchEvent;
 class default_1 extends Controller {
     constructor() {
         super(...arguments);
-        _default_1_instances.add(this);
+        _instances.add(this);
     }
     initialize() {
         this.element.setAttribute('data-live-ignore', '');
@@ -39,14 +39,14 @@ class default_1 extends Controller {
     }
     connect() {
         if (this.urlValue) {
-            this.tomSelect = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createAutocompleteWithRemoteData).call(this, this.urlValue, this.minCharactersValue);
+            this.tomSelect = __classPrivateFieldGet(this, _instances, "m", _createAutocompleteWithRemoteData).call(this, this.urlValue, this.minCharactersValue);
             return;
         }
         if (this.optionsAsHtmlValue) {
-            this.tomSelect = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createAutocompleteWithHtmlContents).call(this);
+            this.tomSelect = __classPrivateFieldGet(this, _instances, "m", _createAutocompleteWithHtmlContents).call(this);
             return;
         }
-        this.tomSelect = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createAutocomplete).call(this);
+        this.tomSelect = __classPrivateFieldGet(this, _instances, "m", _createAutocomplete).call(this);
     }
     disconnect() {
         this.tomSelect.revertSettings.innerHTML = this.element.innerHTML;
@@ -65,14 +65,19 @@ class default_1 extends Controller {
         return this.element;
     }
     get preload() {
-        if (this.preloadValue == 'false')
+        if (!this.hasPreloadValue) {
+            return 'focus';
+        }
+        if (this.preloadValue == 'false') {
             return false;
-        if (this.preloadValue == 'true')
+        }
+        if (this.preloadValue == 'true') {
             return true;
+        }
         return this.preloadValue;
     }
 }
-_default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _default_1_getCommonConfig() {
+_instances = new WeakSet(), _getCommonConfig = function _getCommonConfig() {
     const plugins = {};
     const isMultiple = !this.selectElement || this.selectElement.multiple;
     if (!this.formElement.disabled && !isMultiple) {
@@ -87,7 +92,7 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
     const render = {
         no_results: () => {
             return `<div class="no-results">${this.noResultsFoundTextValue}</div>`;
-        }
+        },
     };
     const config = {
         render: render,
@@ -104,19 +109,19 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
     if (!this.selectElement && !this.urlValue) {
         config.shouldLoad = () => false;
     }
-    return __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeObjects).call(this, config, this.tomSelectOptionsValue);
-}, _default_1_createAutocomplete = function _default_1_createAutocomplete() {
-    const config = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeObjects).call(this, __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_getCommonConfig).call(this), {
+    return __classPrivateFieldGet(this, _instances, "m", _mergeObjects).call(this, config, this.tomSelectOptionsValue);
+}, _createAutocomplete = function _createAutocomplete() {
+    const config = __classPrivateFieldGet(this, _instances, "m", _mergeObjects).call(this, __classPrivateFieldGet(this, _instances, "m", _getCommonConfig).call(this), {
         maxOptions: this.selectElement ? this.selectElement.options.length : 50,
     });
-    return __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createTomSelect).call(this, config);
-}, _default_1_createAutocompleteWithHtmlContents = function _default_1_createAutocompleteWithHtmlContents() {
-    const config = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeObjects).call(this, __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_getCommonConfig).call(this), {
+    return __classPrivateFieldGet(this, _instances, "m", _createTomSelect).call(this, config);
+}, _createAutocompleteWithHtmlContents = function _createAutocompleteWithHtmlContents() {
+    const config = __classPrivateFieldGet(this, _instances, "m", _mergeObjects).call(this, __classPrivateFieldGet(this, _instances, "m", _getCommonConfig).call(this), {
         maxOptions: this.selectElement ? this.selectElement.options.length : 50,
         score: (search) => {
             const scoringFunction = this.tomSelect.getScoreFunction(search);
             return (item) => {
-                return scoringFunction(Object.assign(Object.assign({}, item), { text: __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_stripTags).call(this, item.text) }));
+                return scoringFunction(Object.assign(Object.assign({}, item), { text: __classPrivateFieldGet(this, _instances, "m", _stripTags).call(this, item.text) }));
             };
         },
         render: {
@@ -125,21 +130,24 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
             },
             option: function (item) {
                 return `<div>${item.text}</div>`;
-            }
+            },
         },
     });
-    return __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createTomSelect).call(this, config);
-}, _default_1_createAutocompleteWithRemoteData = function _default_1_createAutocompleteWithRemoteData(autocompleteEndpointUrl, minCharacterLength) {
-    const config = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeObjects).call(this, __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_getCommonConfig).call(this), {
+    return __classPrivateFieldGet(this, _instances, "m", _createTomSelect).call(this, config);
+}, _createAutocompleteWithRemoteData = function _createAutocompleteWithRemoteData(autocompleteEndpointUrl, minCharacterLength) {
+    const config = __classPrivateFieldGet(this, _instances, "m", _mergeObjects).call(this, __classPrivateFieldGet(this, _instances, "m", _getCommonConfig).call(this), {
         firstUrl: (query) => {
             const separator = autocompleteEndpointUrl.includes('?') ? '&' : '?';
             return `${autocompleteEndpointUrl}${separator}query=${encodeURIComponent(query)}`;
         },
         load: function (query, callback) {
             const url = this.getUrl(query);
             fetch(url)
-                .then(response => response.json())
-                .then(json => { this.setNextUrl(query, json.next_page); callback(json.results); })
+                .then((response) => response.json())
+                .then((json) => {
+                this.setNextUrl(query, json.next_page);
+                callback(json.results);
+            })
                 .catch(() => callback());
         },
         shouldLoad: function (query) {
@@ -167,17 +175,17 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
         },
         preload: this.preload,
     });
-    return __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createTomSelect).call(this, config);
-}, _default_1_stripTags = function _default_1_stripTags(string) {
+    return __classPrivateFieldGet(this, _instances, "m", _createTomSelect).call(this, config);
+}, _stripTags = function _stripTags(string) {
     return string.replace(/(<([^>]+)>)/gi, '');
-}, _default_1_mergeObjects = function _default_1_mergeObjects(object1, object2) {
+}, _mergeObjects = function _mergeObjects(object1, object2) {
     return Object.assign(Object.assign({}, object1), object2);
-}, _default_1_createTomSelect = function _default_1_createTomSelect(options) {
-    __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_dispatchEvent).call(this, 'autocomplete:pre-connect', { options });
+}, _createTomSelect = function _createTomSelect(options) {
+    __classPrivateFieldGet(this, _instances, "m", _dispatchEvent).call(this, 'autocomplete:pre-connect', { options });
     const tomSelect = new TomSelect(this.formElement, options);
-    __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_dispatchEvent).call(this, 'autocomplete:connect', { tomSelect, options });
+    __classPrivateFieldGet(this, _instances, "m", _dispatchEvent).call(this, 'autocomplete:connect', { tomSelect, options });
     return tomSelect;
-}, _default_1_dispatchEvent = function _default_1_dispatchEvent(name, payload) {
+}, _dispatchEvent = function _dispatchEvent(name, payload) {
     this.element.dispatchEvent(new CustomEvent(name, { detail: payload, bubbles: true }));
 };
 default_1.values = {

src/Autocomplete/assets/package.json

@@ -14,15 +14,14 @@
                 "enabled": true,
                 "autoimport": {
                     "tom-select/dist/css/tom-select.default.css": true,
-                    "tom-select/dist/css/tom-select.bootstrap4.css": false,
                     "tom-select/dist/css/tom-select.bootstrap5.css": false
                 }
             }
         }
     },
     "peerDependencies": {
         "@hotwired/stimulus": "^3.0.0",
-        "tom-select": "^2.0.1"
+        "tom-select": "^2.2.2"
     },
     "devDependencies": {
         "@hotwired/stimulus": "^3.0.0",

src/Autocomplete/assets/src/controller.ts

@@ -19,6 +19,7 @@ export default class extends Controller {
     readonly noResultsFoundTextValue: string;
     readonly minCharactersValue: number;
     readonly tomSelectOptionsValue: object;
+    readonly hasPreloadValue: boolean;
     readonly preloadValue: string;
     tomSelect: TomSelect;
 
@@ -225,6 +226,10 @@ export default class extends Controller {
     }
 
     get preload() {
+        if (!this.hasPreloadValue) {
+            return 'focus';
+        }
+
         if (this.preloadValue == 'false') {
             return false;
         }

src/Autocomplete/doc/index.rst

@@ -167,28 +167,16 @@ Styling Tom Select
 In your ``assets/controllers.json`` file, you should see a line that automatically
 includes a CSS file for Tom Select which will give you basic styles.
 
-.. code-block:: text
-
-    "autoimport": {
-        "tom-select/dist/css/tom-select.default.css": true
-    }
-
-If you're using Bootstrap, you can get Bootstrap-ready styling by
-changing this line to ``false``:
+If you're using Bootstrap, set ``tom-select.default.css`` to false
+and ``tom-select.bootstrap5.css`` to true:
 
 .. code-block:: text
 
     "autoimport": {
-        "tom-select/dist/css/tom-select.default.css": false
+        "tom-select/dist/css/tom-select.default.css": false,
+        "tom-select/dist/css/tom-select.bootstrap5.css": true
     }
 
-And then importing the Bootstrap CSS file:
-
-.. code-block:: css
-
-    /* assets/styles/app.css */
-    @import 'tom-select/dist/css/tom-select.bootstrap5.css';
-
 To further customize things, you can override the classes with your own custom
 CSS and even control how individual parts of Tom Select render. See `Tom Select Render Templates`_.
 
@@ -382,7 +370,7 @@ This only works for Doctrine entities: see `Manually using the Stimulus Controll
 if you're autocompleting something other than an entity.
 
 To expose the endpoint, create a class that implements ``Symfony\UX\Autocomplete\EntityAutocompleterInterface``
-and tag this service with ``ux.entity_autocompleter`` and include an ``alias``::
+and tag this service with ``ux.entity_autocompleter``, including an ``alias`` option::
 
     namespace App\Autocompleter;
 

src/LiveComponent/CHANGELOG.md

@@ -14,6 +14,9 @@ live_component:
 +    prefix: /_components
 ```
 
+-   Removed `Content-Type` header when returning the empty response redirect.
+-   Fixed bug when re-rendering SVG's (.#557)
+
 ## 2.5.0
 
 -   [BEHAVIOR CHANGE] Previously, Ajax calls could happen in parallel (if