@1024pix/pix-ui 55.21.0 → 55.21.2

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

@@ -21,12 +21,25 @@ export default class PixMultiSelect extends Component {
   @tracked isExpanded = false;
   @tracked searchData;
 
-  @tracked options = [];
+  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,
+    }));
 
-  constructor(...args) {
-    super(...args);
+    if (this.args.isSearchable) {
+      return [...optionsWithCheckedStatus.sort(sortOptionsByCheckedFirst)];
+    }
 
-    this.options = [...(this.args.options || [])];
+    return optionsWithCheckedStatus;
   }
 
   get mainInputClassName() {
@@ -57,9 +70,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 +90,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 +124,6 @@ export default class PixMultiSelect extends Component {
   showDropDown() {
     if (this.isExpanded) return;
     this.isExpanded = true;
-    this._setDisplayedOptions(this.args.values, true);
   }
 
   @action
@@ -144,9 +143,6 @@ export default class PixMultiSelect extends Component {
       ? event.target.value
       : removeCapitalizeAndDiacritics(event.target.value);
     this.isExpanded = true;
-    if (!event.target.value) {
-      this._setDisplayedOptions(this.args.values, true);
-    }
   }
 
   get className() {

package/addon/styles/_pix-app-layout.scss

@@ -18,7 +18,7 @@
   &__banner {
     position: sticky;
     top: 0;
-    z-index: 3;
+    z-index: 900;
     grid-area: banner;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "55.21.0",
+  "version": "55.21.2",
   "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",