@1024pix/pix-ui 55.21.1 → 55.22.0

package/addon/components/pix-multi-select.js

@@ -1,3 +1,4 @@
+import { warn } from '@ember/debug';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import Component from '@glimmer/component';
@@ -21,12 +22,37 @@ export default class PixMultiSelect extends Component {
   @tracked isExpanded = false;
   @tracked searchData;
 
-  @tracked options = [];
-
   constructor(...args) {
     super(...args);
 
-    this.options = [...(this.args.options || [])];
+    warn(
+      `PixMultiSelect: @strictSearch is deprecated in favour of @onSearch`,
+      !this.args.strictSearch,
+      {
+        id: 'pix-ui.pix-multi-select.strictSearch.deprecated',
+      },
+    );
+  }
+
+  get options() {
+    return [...(this.args.options || [])];
+  }
+
+  get hasValues() {
+    return this.args.values && Array.isArray(this.args.values);
+  }
+
+  get displayedOptions() {
+    const optionsWithCheckedStatus = this.options.map((option) => ({
+      ...option,
+      checked: this.hasValues ? this.args.values.includes(option.value) : false,
+    }));
+
+    if (this.args.isSearchable) {
+      return [...optionsWithCheckedStatus.sort(sortOptionsByCheckedFirst)];
+    }
+
+    return optionsWithCheckedStatus;
   }
 
   get mainInputClassName() {
@@ -57,9 +83,9 @@ export default class PixMultiSelect extends Component {
 
   get results() {
     if (this.args.isSearchable && this.searchData) {
-      return this.options.filter(({ label }) => this._search(label));
+      return this.displayedOptions.filter(({ label }) => this._search(label));
     }
-    return this.options;
+    return this.displayedOptions;
   }
 
   get placeholder() {
@@ -77,19 +103,6 @@ export default class PixMultiSelect extends Component {
     return placeholder;
   }
 
-  _setDisplayedOptions(selected, shouldSort) {
-    const options = this.options.map((option) => ({
-      ...option,
-      checked: selected ? selected.includes(option.value) : false,
-    }));
-
-    if (shouldSort && this.args.isSearchable) {
-      options.sort(sortOptionsByCheckedFirst);
-    }
-
-    this.options = options;
-  }
-
   _search(label) {
     if (this.args.strictSearch) {
       return label.includes(this.searchData);
@@ -124,7 +137,6 @@ export default class PixMultiSelect extends Component {
   showDropDown() {
     if (this.isExpanded) return;
     this.isExpanded = true;
-    this._setDisplayedOptions(this.args.values, true);
   }
 
   @action
@@ -140,13 +152,14 @@ export default class PixMultiSelect extends Component {
 
   @action
   updateSearch(event) {
-    this.searchData = this.args.strictSearch
-      ? event.target.value
-      : removeCapitalizeAndDiacritics(event.target.value);
-    this.isExpanded = true;
-    if (!event.target.value) {
-      this._setDisplayedOptions(this.args.values, true);
+    if (this.args.onSearch) {
+      this.args.onSearch(event.target.value);
+    } else {
+      this.searchData = this.args.strictSearch
+        ? event.target.value
+        : removeCapitalizeAndDiacritics(event.target.value);
     }
+    this.isExpanded = true;
   }
 
   get className() {

package/addon/components/pix-select-list.js

@@ -1,22 +1,21 @@
 import Component from '@glimmer/component';
 
 export default class PixSelectList extends Component {
-  constructor(...args) {
-    super(...args);
-
-    const categories = [];
+  get categories() {
+    const uniqueCategories = new Set(
+      ...this.args.options.map((option) => option.category).filter(Boolean),
+    );
+    return Array.from(uniqueCategories.values());
+  }
 
-    this.args.options.forEach((element) => {
-      if (!categories.includes(element.category) && element.category !== undefined) {
-        categories.push(element.category);
-      }
-    });
-    this.displayCategory = categories.length > 0;
+  get displayCategory() {
+    return this.categories.length > 0;
   }
 
   get isDefaultOptionHidden() {
     return !this.args.isExpanded || this.args.hideDefaultOption;
   }
+
   get results() {
     const results = [];
     let options = this.args.options;

package/addon/components/pix-select.js

@@ -100,6 +100,10 @@ export default class PixSelect extends Component {
 
   @action
   setSearchValue(event) {
+    if (this.args.onSearch) {
+      this.args.onSearch(event.target.value);
+      return;
+    }
     this.searchValue = event.target.value.trim();
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "55.21.1",
+  "version": "55.22.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -27,7 +27,8 @@
     },
     "ember-source": {
       "@glimmer/component": "^2.0.0"
-    }
+    },
+    "glob": "^9.0.0"
   },
   "scripts": {
     "build": "./scripts/build.sh",
@@ -67,7 +68,6 @@
     "ember-cli-babel": "^8.2.0",
     "ember-cli-htmlbars": "^6.3.0",
     "ember-cli-sass": "^11.0.1",
-    "ember-cli-update": "^2.0.1",
     "ember-click-outside": "^6.1.1",
     "ember-lifeline": "^7.0.0",
     "ember-modifier": "^4.2.0",