@1024pix/pix-ui 44.2.4 → 44.2.6

package/addon/components/pix-search-input.hbs

@@ -16,8 +16,8 @@
       class="pix-search-input__input"
       name={{@inputName}}
       placeholder={{@placeholder}}
-      value={{@value}}
-      oninput={{this.onSearch}}
+      value={{this.initialValue}}
+      {{on "input" this.onSearch}}
       ...attributes
     />
   </div>

package/addon/components/pix-search-input.js

@@ -1,14 +1,16 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
-import debounce from 'lodash.debounce';
+import { debounceTask } from 'ember-lifeline';
 
 export default class PixSearchInput extends Component {
+  initialValue = this.args.value;
+
   constructor() {
     super(...arguments);
 
     this.debounceTimeBeforeSearch = parseInt(this.args.debounceTimeInMs);
-    if (isNaN(this.debounceTimeBeforeSearch)) {
+    if (Number.isNaN(this.debounceTimeBeforeSearch)) {
       throw new Error('ERROR in PixSearchInput component, @debounceTimeInMs param is not provided');
     }
     if (!this.args.triggerFiltering) {
@@ -21,10 +23,6 @@ export default class PixSearchInput extends Component {
     }
 
     this.searchInputId = this.args.id || guidFor(this);
-    this.debouncedTriggerFiltering = debounce(
-      this.args.triggerFiltering,
-      this.debounceTimeBeforeSearch,
-    );
   }
 
   get label() {
@@ -35,8 +33,17 @@ export default class PixSearchInput extends Component {
     return this.args.label ? null : this.args.ariaLabel;
   }
 
+  debouncedTriggerFiltering(value) {
+    this.args.triggerFiltering(this.searchInputId, value);
+  }
+
   @action
-  async onSearch(event) {
-    await this.debouncedTriggerFiltering(this.searchInputId, event.target.value);
+  onSearch(event) {
+    debounceTask(
+      this,
+      'debouncedTriggerFiltering',
+      event.target.value,
+      this.debounceTimeBeforeSearch,
+    );
   }
 }

package/addon/styles/pix-design-tokens/_colors.scss

@@ -1,4 +1,5 @@
 // See https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=16%3A2
+// stylelint-disable color-no-hex
 :root {
   --pix-primary-10: #f7f5ff;
   --pix-primary-100: #cec3f4;
@@ -57,7 +58,7 @@
   --pix-security-light: #ff3f94;
   --pix-environment-dark: #5e2563;
   --pix-environment-light: #564da6;
-  --pix-shadow: #07142E;
+  --pix-shadow: #07142e;
 }
 
 // @deprecated - SCSS variables are replaced by CSS variables
@@ -199,3 +200,4 @@ $pix-content-gradient: linear-gradient(180deg, #1a8c89 0%, #52d987 100%);
 $pix-communication-gradient: linear-gradient(180deg, #3d68ff 0%, #12a3ff 100%);
 $pix-security-gradient: linear-gradient(180deg, #ac008d 0%, #ff3f94 100%);
 $pix-environment-gradient: linear-gradient(180deg, #5e2563 0%, #564da6 100%);
+// stylelint-enable color-no-hex

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "44.2.4",
+  "version": "44.2.6",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -53,15 +53,15 @@
     "ember-cli-htmlbars": "^6.1.1",
     "ember-cli-sass": "^11.0.1",
     "ember-click-outside": "^6.0.1",
+    "ember-lifeline": "^7.0.0",
     "ember-popperjs": "^3.0.0",
-    "ember-truth-helpers": "^4.0.0",
-    "lodash.debounce": "^4.0.8"
+    "ember-truth-helpers": "^4.0.0"
   },
   "devDependencies": {
     "@1024pix/ember-testing-library": "^1.0.0",
     "@1024pix/eslint-config": "^1.2.2",
     "@1024pix/storybook-ember": "^7.1.1",
-    "@1024pix/stylelint-config": "^5.0.2",
+    "@1024pix/stylelint-config": "^5.1.1",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-decorators": "^7.20.5",
     "@ember/optional-features": "^2.0.0",