@1024pix/pix-ui 55.34.0 → 56.0.0

package/addon/components/pix-checkbox.js

@@ -68,6 +68,6 @@ export default class PixCheckbox extends Component {
   }
 
   formatMessage(message) {
-    return formatMessage('fr', `input.${message}`);
+    return formatMessage(this.args.locale ?? 'fr', `input.${message}`);
   }
 }

package/addon/components/pix-filterable-and-searchable-select.hbs

@@ -20,6 +20,7 @@
       @values={{this.selectedCategories}}
       @options={{this.categories}}
       @onChange={{this.selectCategories}}
+      @isComputeWidthDisabled={{true}}
       @screenReaderOnly={{true}}
       @className="pix-filterable-and-searchable-select__pix-multi-select"
     >

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

@@ -0,0 +1,281 @@
+import { warn } from '@ember/debug';
+import { concat } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';
+import { PopperJS } from 'ember-popperjs';
+import { gt, or } from 'ember-truth-helpers';
+
+import onArrowDownUpAction from '../modifiers/on-arrow-down-up-action';
+import onEnterAction from '../modifiers/on-enter-action';
+import onEscapeAction from '../modifiers/on-escape-action';
+import { formatMessage } from '../translations';
+import PixCheckbox from './pix-checkbox';
+import PixIcon from './pix-icon';
+import PixLabel from './pix-label';
+
+function removeCapitalizeAndDiacritics(string) {
+  return string
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase();
+}
+
+export default class PixMultiSelect extends Component {
+  @tracked isExpanded = false;
+  @tracked searchData;
+  @service elementHelper;
+
+  constructor(...args) {
+    super(...args);
+
+    this.searchId = 'search-input-' + guidFor(this);
+    this.multiSelectId = this.args.id ? this.args.id : 'select-' + guidFor(this);
+    this.listId = `list-${this.multiSelectId}`;
+
+    if (!this.args.isComputeWidthDisabled) {
+      this.elementHelper.waitForElement(this.listId).then((elementList) => {
+        const baseFontRemRatio = Number(
+          getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
+        );
+        const listWidth = elementList.getBoundingClientRect().width;
+        const selectWidth = listWidth / baseFontRemRatio;
+
+        const element = document.getElementById(`container-${this.multiSelectId}`);
+        element.style.setProperty('--pix-multi-select-width', `${selectWidth + 0.5}rem`); // Fix for FF
+      });
+    }
+
+    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 mainInputClassName() {
+    let classes = 'pix-multi-select-main-input';
+
+    if (this.args.className) {
+      classes += ` ${this.args.className}`;
+    }
+
+    return classes;
+  }
+
+  get isAriaExpanded() {
+    return this.isExpanded ? 'true' : 'false';
+  }
+
+  get results() {
+    if (this.args.isSearchable && this.searchData) {
+      return this.args.options.filter(({ label }) => this._search(label));
+    }
+    return this.args.options;
+  }
+
+  get placeholder() {
+    const { values, placeholder } = this.args;
+    if (values?.length > 0) {
+      const selectedOptionLabels = this.options
+        .filter((option) => {
+          const hasOption = values.includes(option.value);
+          return hasOption && Boolean(option.label);
+        })
+        .map(({ label }) => label)
+        .join(', ');
+      return selectedOptionLabels;
+    }
+    return placeholder;
+  }
+
+  _search(label) {
+    if (this.args.strictSearch) {
+      return label.includes(this.searchData);
+    }
+    return removeCapitalizeAndDiacritics(label).includes(this.searchData);
+  }
+
+  @action
+  onSelect(event) {
+    let selected = [...(this.args.values || [])];
+    if (event.target.checked) {
+      selected.push(event.target.value);
+    } else {
+      selected = selected.filter((value) => value !== event.target.value);
+    }
+
+    if (this.args.onChange) {
+      this.args.onChange(selected);
+    }
+  }
+
+  @action
+  toggleDropDown() {
+    if (this.isExpanded) {
+      this.hideDropDown();
+    } else {
+      this.showDropDown();
+    }
+  }
+
+  @action
+  showDropDown() {
+    if (this.isExpanded) return;
+    this.isExpanded = true;
+  }
+
+  @action
+  hideDropDown(event) {
+    if (!this.isExpanded) return;
+
+    if (event) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+    this.isExpanded = false;
+  }
+
+  @action
+  updateSearch(event) {
+    if (this.args.onSearch) {
+      this.args.onSearch(event.target.value);
+    } else {
+      this.searchData = this.args.strictSearch
+        ? event.target.value
+        : removeCapitalizeAndDiacritics(event.target.value);
+    }
+  }
+
+  @action
+  isCheckBoxChecked(value) {
+    return this.args.values?.includes(value);
+  }
+
+  get className() {
+    const { className } = this.args;
+    return ' ' + className;
+  }
+
+  get selectSearchLabel() {
+    return formatMessage(this.args.locale ?? 'fr', 'select.search');
+  }
+
+  @action
+  focus(event) {
+    if (!event.target) return;
+    if (!this.isExpanded) return;
+
+    if (this.args.isSearchable) {
+      event.target.querySelector(`#${this.searchId}`)?.focus();
+    }
+  }
+
+  <template>
+    <div
+      class="pix-multi-select {{if @inlineLabel ' pix-multi-select--inline'}}"
+      id="container-{{this.multiSelectId}}"
+      ...attributes
+      {{onClickOutside this.hideDropDown}}
+      {{onArrowDownUpAction this.listId this.showDropDown this.isExpanded}}
+      {{onEscapeAction this.hideDropDown this.multiSelectId}}
+    >
+      <PixLabel
+        @for={{this.multiSelectId}}
+        @requiredLabel={{@requiredLabel}}
+        @subLabel={{@subLabel}}
+        @size={{@size}}
+        @screenReaderOnly={{@screenReaderOnly}}
+        @inlineLabel={{@inlineLabel}}
+      >
+        {{yield to="label"}}
+      </PixLabel>
+
+      <div>
+        <PopperJS @placement={{or @placement "bottom-start"}} as |reference popover|>
+          <button
+            {{reference}}
+            id={{this.multiSelectId}}
+            type="button"
+            aria-expanded={{this.isAriaExpanded}}
+            aria-controls={{this.listId}}
+            aria-haspopup="menu"
+            class={{this.mainInputClassName}}
+            disabled={{@isDisabled}}
+            {{on "click" this.toggleDropDown}}
+          >
+            {{#if (has-block "placeholder")}}
+              <span class="pix-multi-select__placeholder">{{yield to="placeholder"}}</span>
+            {{else if @placeholder}}
+              <span class="pix-multi-select__placeholder">{{this.placeholder}}</span>
+            {{/if}}
+            <PixIcon
+              class="pix-multi-select-main-input__dropdown-icon
+                {{if this.isExpanded ' pix-multi-select-main-input__dropdown-icon--expand'}}"
+              @name={{if this.isExpanded "chevronTop" "chevronBottom"}}
+              @ariaHidden={{true}}
+            />
+          </button>
+
+          <ul
+            {{popover}}
+            class="pix-multi-select-list {{unless this.isExpanded 'pix-multi-select-list--hidden'}}"
+            id={{this.listId}}
+            role="menu"
+            aria-hidden={{this.isExpanded undefined "true"}}
+            {{on "transitionend" this.focus}}
+          >
+            {{#if @isSearchable}}
+              <li class="pix-select__search">
+                <PixIcon class="pix-select-search__icon" @name="search" @ariaHidden={{true}} />
+                <label class="screen-reader-only" for={{this.searchId}}>
+                  {{this.selectSearchLabel}}
+                </label>
+                <input
+                  class="pix-select-search__input"
+                  id={{this.searchId}}
+                  autocomplete="off"
+                  tabindex={{if this.isExpanded "0" "-1"}}
+                  placeholder={{@searchPlaceholder}}
+                  {{on "input" this.updateSearch}}
+                />
+              </li>
+            {{/if}}
+            {{#if (gt this.results.length 0)}}
+              {{#each this.results as |option|}}
+                <li class="pix-multi-select-list__item" role="menuitem">
+                  <PixCheckbox
+                    @id={{concat this.multiSelectId "-" option.value}}
+                    @checked={{this.isCheckBoxChecked option.value}}
+                    @size="small"
+                    @class="pix-multi-select-list__item-label"
+                    value={{option.value}}
+                    {{on "change" this.onSelect}}
+                    {{onEnterAction this.hideDropDown this.multiSelectId}}
+                    tabindex={{if this.isExpanded "0" "-1"}}
+                  >
+                    <:label>{{yield option}}</:label>
+                  </PixCheckbox>
+                </li>
+              {{/each}}
+            {{else}}
+              <li
+                class="pix-multi-select-list__item pix-multi-select-list__item--no-result"
+              >{{@emptyMessage}}</li>
+            {{/if}}
+          </ul>
+        </PopperJS>
+      </div>
+    </div>
+  </template>
+}

package/addon/components/pix-select.gjs

@@ -0,0 +1,256 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';
+import { PopperJS } from 'ember-popperjs';
+import { or } from 'ember-truth-helpers';
+
+import onArrowDownUpAction from '../modifiers/on-arrow-down-up-action';
+import onEscapeAction from '../modifiers/on-escape-action';
+import { formatMessage } from '../translations';
+import PixIcon from './pix-icon';
+import PixLabel from './pix-label';
+import PixSelectList from './pix-select-list';
+
+export default class PixSelect extends Component {
+  @service elementHelper;
+  @tracked isExpanded = false;
+  @tracked searchValue = null;
+
+  constructor(...args) {
+    super(...args);
+
+    this.searchId = 'search-input-' + guidFor(this);
+    this.selectId = this.args.id ? this.args.id : 'select-' + guidFor(this);
+    this.listId = `listbox-${this.selectId}`;
+
+    if (!this.args.isComputeWidthDisabled) {
+      this.elementHelper.waitForElement(this.listId).then((elementList) => {
+        const baseFontRemRatio = Number(
+          getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
+        );
+        const listWidth = elementList.getBoundingClientRect().width;
+        const selectWidth = listWidth / baseFontRemRatio;
+
+        const element = document.getElementById(`container-${this.selectId}`);
+        element.style.setProperty('--pix-select-width', `${selectWidth + 0.5}rem`); // Fix for FF
+      });
+    }
+  }
+
+  get selectSearchLabel() {
+    return formatMessage(this.args.locale ?? 'fr', 'select.search');
+  }
+
+  get displayDefaultOption() {
+    return !this.searchValue && !this.args.hideDefaultOption;
+  }
+
+  get buttonClassName() {
+    const buttonClasses = ['pix-select-button'];
+    if (this.args.className) {
+      buttonClasses.push(this.args.className);
+    }
+    if (this.args.errorMessage) {
+      buttonClasses.push('pix-select-button--error');
+    }
+
+    return buttonClasses.join(' ');
+  }
+
+  get rootClassNames() {
+    const classes = ['pix-select'];
+    if (this.args.inlineLabel) {
+      classes.push('pix-select--inline');
+    }
+
+    if (this.args.isFullWidth) {
+      classes.push('pix-select--full-width');
+    }
+
+    return classes.join(' ');
+  }
+
+  get isAriaExpanded() {
+    return this.isExpanded ? 'true' : 'false';
+  }
+
+  get placeholder() {
+    if (!this.args.value) return this.args.placeholder;
+    const option = this.args.options.find((option) => option.value === this.args.value);
+    return option ? option.label : this.args.placeholder;
+  }
+
+  get defaultOption() {
+    return {
+      value: '',
+    };
+  }
+
+  @action
+  toggleDropdown(event) {
+    if (this.isExpanded) {
+      this.hideDropdown(event);
+    } else {
+      this.showDropdown(event);
+    }
+  }
+
+  @action
+  showDropdown(event) {
+    event.preventDefault();
+    if (this.args.isDisabled) return;
+
+    this.isExpanded = true;
+  }
+
+  @action
+  hideDropdown(event) {
+    if (this.isExpanded) {
+      event.preventDefault();
+
+      this.isExpanded = false;
+    }
+  }
+
+  @action
+  onChange(option, event) {
+    if (this.args.isDisabled) return;
+
+    this.args.onChange(option.value);
+
+    this.hideDropdown(event);
+    document.getElementById(this.selectId).focus();
+  }
+
+  @action
+  setSearchValue(event) {
+    if (this.args.onSearch) {
+      this.args.onSearch(event.target.value);
+      return;
+    }
+    this.searchValue = event.target.value.trim();
+  }
+
+  @action
+  lockTab(event) {
+    if (event.code === 'Tab' && this.isExpanded) {
+      event.preventDefault();
+      if (this.args.isSearchable) document.getElementById(this.searchId).focus();
+    }
+  }
+
+  @action
+  focus(event) {
+    if (!event.target) return;
+    if (!this.isExpanded) return;
+
+    if (this.args.value) {
+      event.target.querySelector("[aria-selected='true']")?.focus();
+    } else if (this.args.isSearchable) {
+      event.target.querySelector(`#${this.searchId}`)?.focus();
+    } else if (this.displayDefaultOption) {
+      event.target.querySelector("[aria-selected='true']")?.focus();
+    }
+  }
+
+  <template>
+    <div
+      class={{this.rootClassNames}}
+      id="container-{{this.selectId}}"
+      {{onClickOutside this.hideDropdown}}
+      {{onArrowDownUpAction this.listId this.showDropdown this.isExpanded}}
+      {{onEscapeAction this.hideDropdown this.selectId}}
+      {{on "keydown" this.lockTab}}
+      ...attributes
+    >
+      {{#if (has-block "label")}}
+        <PixLabel
+          @for={{this.selectId}}
+          @requiredLabel={{@requiredLabel}}
+          @subLabel={{@subLabel}}
+          @size={{@size}}
+          @screenReaderOnly={{@screenReaderOnly}}
+          @inlineLabel={{@inlineLabel}}
+        >
+          {{yield to="label"}}
+        </PixLabel>
+      {{/if}}
+
+      <div class="pix-select__button-container">
+        <PopperJS @placement={{or @placement "bottom-start"}} as |reference popover|>
+          <button
+            {{reference}}
+            type="button"
+            id={{this.selectId}}
+            class={{this.buttonClassName}}
+            {{on "click" this.toggleDropdown}}
+            aria-expanded={{this.isAriaExpanded}}
+            aria-controls={{this.listId}}
+            aria-disabled={{@isDisabled}}
+          >
+            {{#if @iconName}}
+              <PixIcon
+                @name={{@iconName}}
+                @plainIcon={{@plainIcon}}
+                @ariaHidden={{true}}
+                class="pix-select-button__icon"
+              />
+            {{/if}}
+
+            <span class="pix-select-button__text">{{this.placeholder}}</span>
+
+            <PixIcon
+              class="pix-select-button__dropdown-icon"
+              @ariaHidden={{true}}
+              @name={{if this.isExpanded "chevronTop" "chevronBottom"}}
+            />
+          </button>
+          <div
+            {{popover}}
+            class="pix-select__dropdown {{unless this.isExpanded ' pix-select__dropdown--closed'}}"
+            {{on "transitionend" this.focus}}
+            aria-hidden={{this.isExpanded undefined "true"}}
+          >
+            {{#if @isSearchable}}
+              <div class="pix-select__search">
+                <PixIcon class="pix-select-search__icon" @name="search" @ariaHidden={{true}} />
+                <label class="screen-reader-only" for={{this.searchId}}>
+                  {{this.selectSearchLabel}}
+                </label>
+                <input
+                  class="pix-select-search__input"
+                  id={{this.searchId}}
+                  autocomplete="off"
+                  tabindex={{if this.isExpanded "0" "-1"}}
+                  placeholder={{@searchPlaceholder}}
+                  {{on "input" this.setSearchValue}}
+                />
+              </div>
+            {{/if}}
+            <PixSelectList
+              @hideDefaultOption={{@hideDefaultOption}}
+              @listId={{this.listId}}
+              @value={{@value}}
+              @displayDefaultOption={{this.displayDefaultOption}}
+              @searchValue={{this.searchValue}}
+              @onChange={{this.onChange}}
+              @defaultOption={{this.defaultOption}}
+              @selectId={{this.selectId}}
+              @isExpanded={{this.isExpanded}}
+              @options={{@options}}
+              @defaultOptionValue={{@placeholder}}
+              @emptySearchMessage={{@emptySearchMessage}}
+            />
+          </div>
+        </PopperJS>
+        {{#if @errorMessage}}
+          <p class="pix-select__error-message">{{@errorMessage}}</p>
+        {{/if}}
+      </div>
+    </div>
+  </template>
+}

package/addon/styles/_pix-multi-select.scss

@@ -7,11 +7,19 @@
   display: inline-flex;
   flex-direction: column;
   gap: var(--pix-spacing-1x);
+  width: var(--pix-multi-select-width);
+  max-width: 100%;
 
   &--inline {
     flex-direction: row;
     gap: var(--pix-spacing-2x);
-    align-items: center;
+    align-items: baseline;
+  }
+
+  &__placeholder {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 }
 

package/addon/styles/_pix-select.scss

@@ -13,7 +13,7 @@
   &--inline {
     flex-direction: row;
     gap: var(--pix-spacing-2x);
-    align-items: center;
+    align-items: baseline;
   }
 
   &--full-width {

package/addon/translations/en.js

@@ -1,4 +1,13 @@
 export default {
+  input: {
+    state: {
+      success: 'Correct selection',
+      error: 'Incorrect selection',
+    },
+  },
+  select: {
+    search: 'Search',
+  },
   pagination: {
     beforeResultsPerPage: 'See',
     selectPageSizeLabel: 'Select the number of items by page',

package/addon/translations/es-419.js

@@ -0,0 +1,22 @@
+export default {
+  input: {
+    state: {
+      success: 'Selección correcta',
+      error: 'Selección incorrecta',
+    },
+  },
+  select: {
+    search: 'Buscar',
+  },
+  pagination: {
+    beforeResultsPerPage: 'Ver',
+    selectPageSizeLabel: 'Número de elementos que se mostrarán por página',
+    pageResults:
+      '{total, plural, =0 {0 elemento} =1 {1 elemento} otros {{total, número} elementos}}',
+    pageInfo:
+      '{start, número}-{end, número} de {total, plural, =0 {0 elemento} =1 {1 elemento} otros {{total, número} elementos}}',
+    previousPageLabel: 'Ir a la página anterior',
+    pageNumber: 'Página {current, number} / {total, number}',
+    nextPageLabel: 'Ir a la página siguiente',
+  },
+};

package/addon/translations/es.js

@@ -0,0 +1,22 @@
+export default {
+  input: {
+    state: {
+      success: 'Selección correcta',
+      error: 'Selección incorrecta',
+    },
+  },
+  select: {
+    search: 'Buscar',
+  },
+  pagination: {
+    beforeResultsPerPage: 'Ver',
+    selectPageSizeLabel: 'Número de elementos que se mostrarán por página',
+    pageResults:
+      '{total, plural, =0 {0 elemento} =1 {1 elemento} otros {{total, número} elementos}}',
+    pageInfo:
+      '{start, número}-{end, número} de {total, plural, =0 {0 elemento} =1 {1 elemento} otros {{total, número} elementos}}',
+    previousPageLabel: 'Ir a la página anterior',
+    pageNumber: 'Página {current, number} / {total, number}',
+    nextPageLabel: 'Ir a la página siguiente',
+  },
+};

package/addon/translations/fr.js

@@ -5,6 +5,9 @@ export default {
       error: 'Sélection incorrecte',
     },
   },
+  select: {
+    search: 'Rechercher',
+  },
   pagination: {
     beforeResultsPerPage: 'Voir',
     selectPageSizeLabel: "Nombre d'élément à afficher par page",

package/addon/translations/index.js

@@ -1,6 +1,8 @@
 import { createIntl } from '@formatjs/intl';
 
 import en from './en';
+import es from './es';
+import es419 from './es-419';
 import fr from './fr';
 import nl from './nl';
 
@@ -22,6 +24,14 @@ const locales = {
     locale: 'nl',
     messages: flattenObject(nl),
   }),
+  es: createIntl({
+    locale: 'es',
+    messages: flattenObject(es),
+  }),
+  'es-419': createIntl({
+    locale: 'es-419',
+    messages: flattenObject(es419),
+  }),
 };
 
 export function flattenObject(object) {

package/addon/translations/nl.js

@@ -1,4 +1,13 @@
 export default {
+  input: {
+    state: {
+      success: 'Correcte selectie',
+      error: 'Onjuiste selectie',
+    },
+  },
+  select: {
+    search: 'Zoeken',
+  },
   pagination: {
     beforeResultsPerPage: 'Zie',
     selectPageSizeLabel: 'Selecteer het aantal items per pagina',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "55.34.0",
+  "version": "56.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -73,7 +73,7 @@
     "ember-modifier": "^4.2.0",
     "ember-popperjs": "^3.0.0",
     "ember-template-imports": "^4.3.0",
-    "ember-truth-helpers": "^4.0.0"
+    "ember-truth-helpers": "^5.0.0"
   },
   "devDependencies": {
     "@1024pix/ember-testing-library": "^3.0.21",

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

@@ -1,100 +0,0 @@
-<div
-  class="pix-multi-select {{if @inlineLabel ' pix-multi-select--inline'}}"
-  ...attributes
-  {{on-click-outside this.hideDropDown}}
-  {{on-arrow-down-up-action this.listId this.showDropDown this.isExpanded}}
-  {{on-escape-action this.hideDropDown this.multiSelectId}}
->
-  <PixLabel
-    @for={{this.multiSelectId}}
-    @requiredLabel={{@requiredLabel}}
-    @subLabel={{@subLabel}}
-    @size={{@size}}
-    @screenReaderOnly={{@screenReaderOnly}}
-    @inlineLabel={{@inlineLabel}}
-  >
-    {{yield to="label"}}
-  </PixLabel>
-
-  <PopperJS @placement={{or @placement "bottom-start"}} as |reference popover|>
-
-    {{#if @isSearchable}}
-      <span {{reference}} class={{this.mainInputClassName}}>
-        <PixIcon
-          @name="search"
-          class="pix-multi-select-main-input__search-icon"
-          @ariaHidden={{true}}
-        />
-
-        <input
-          class="pix-multi-select-main-input__search-input"
-          id={{this.multiSelectId}}
-          type="text"
-          name={{this.multiSelectId}}
-          placeholder={{this.placeholder}}
-          autocomplete="off"
-          {{on "input" this.updateSearch}}
-          {{on "click" this.toggleDropDown}}
-          aria-expanded={{this.isAriaExpanded}}
-          aria-controls={{this.listId}}
-          aria-haspopup="menu"
-          disabled={{@isDisabled}}
-        />
-      </span>
-    {{else}}
-      <button
-        {{reference}}
-        id={{this.multiSelectId}}
-        type="button"
-        aria-expanded={{this.isAriaExpanded}}
-        aria-controls={{this.listId}}
-        aria-haspopup="menu"
-        class={{this.mainInputClassName}}
-        disabled={{@isDisabled}}
-        {{on "click" this.toggleDropDown}}
-      >
-        {{#if (has-block "placeholder")}}
-          {{yield to="placeholder"}}
-        {{else if @placeholder}}
-          {{this.placeholder}}
-        {{/if}}
-        <PixIcon
-          class="pix-multi-select-main-input__dropdown-icon
-            {{if this.isExpanded ' pix-multi-select-main-input__dropdown-icon--expand'}}"
-          @name={{if this.isExpanded "chevronTop" "chevronBottom"}}
-          @ariaHidden={{true}}
-        />
-      </button>
-    {{/if}}
-
-    <ul
-      {{popover}}
-      class="pix-multi-select-list {{unless this.isExpanded 'pix-multi-select-list--hidden'}}"
-      id={{this.listId}}
-      role="menu"
-    >
-      {{#if (gt this.results.length 0)}}
-        {{#each this.results as |option|}}
-          <li class="pix-multi-select-list__item" role="menuitem">
-            <PixCheckbox
-              @id={{concat this.multiSelectId "-" option.value}}
-              @checked={{option.checked}}
-              @size="small"
-              @class="pix-multi-select-list__item-label"
-              value={{option.value}}
-              {{on "change" this.onSelect}}
-              {{on-enter-action this.hideDropDown this.multiSelectId}}
-              tabindex={{if this.isExpanded "0" "-1"}}
-            >
-              <:label>{{yield option}}</:label>
-            </PixCheckbox>
-          </li>
-        {{/each}}
-      {{else}}
-        <li
-          class="pix-multi-select-list__item pix-multi-select-list__item--no-result"
-        >{{@emptyMessage}}</li>
-      {{/if}}
-    </ul>
-  </PopperJS>
-</div>

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

@@ -1,169 +0,0 @@
-import { warn } from '@ember/debug';
-import { action } from '@ember/object';
-import { guidFor } from '@ember/object/internals';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-function sortOptionsByCheckedFirst(a, b) {
-  if (a.checked && b.checked) return 0;
-  if (a.checked) return -1;
-  if (b.checked) return 1;
-  return 0;
-}
-
-function removeCapitalizeAndDiacritics(string) {
-  return string
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '')
-    .toLowerCase();
-}
-
-export default class PixMultiSelect extends Component {
-  @tracked isExpanded = false;
-  @tracked searchData;
-
-  constructor(...args) {
-    super(...args);
-
-    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() {
-    let classes = 'pix-multi-select-main-input';
-
-    if (this.args.isSearchable) {
-      classes += ' pix-multi-select-main-input--is-searchable';
-    }
-    if (this.args.className) {
-      classes += ` ${this.args.className}`;
-    }
-
-    return classes;
-  }
-
-  get multiSelectId() {
-    if (this.args.id) return this.args.id;
-    return 'select-' + guidFor(this);
-  }
-
-  get listId() {
-    return `list-${this.multiSelectId}`;
-  }
-
-  get isAriaExpanded() {
-    return this.isExpanded ? 'true' : 'false';
-  }
-
-  get results() {
-    if (this.args.isSearchable && this.searchData) {
-      return this.displayedOptions.filter(({ label }) => this._search(label));
-    }
-    return this.displayedOptions;
-  }
-
-  get placeholder() {
-    const { values, placeholder } = this.args;
-    if (values?.length > 0) {
-      const selectedOptionLabels = this.options
-        .filter((option) => {
-          const hasOption = values.includes(option.value);
-          return hasOption && Boolean(option.label);
-        })
-        .map(({ label }) => label)
-        .join(', ');
-      return selectedOptionLabels;
-    }
-    return placeholder;
-  }
-
-  _search(label) {
-    if (this.args.strictSearch) {
-      return label.includes(this.searchData);
-    }
-    return removeCapitalizeAndDiacritics(label).includes(this.searchData);
-  }
-
-  @action
-  onSelect(event) {
-    let selected = [...(this.args.values || [])];
-    if (event.target.checked) {
-      selected.push(event.target.value);
-    } else {
-      selected = selected.filter((value) => value !== event.target.value);
-    }
-
-    if (this.args.onChange) {
-      this.args.onChange(selected);
-    }
-  }
-
-  @action
-  toggleDropDown() {
-    if (this.isExpanded) {
-      this.hideDropDown();
-    } else {
-      this.showDropDown();
-    }
-  }
-
-  @action
-  showDropDown() {
-    if (this.isExpanded) return;
-    this.isExpanded = true;
-  }
-
-  @action
-  hideDropDown(event) {
-    if (!this.isExpanded) return;
-
-    if (event) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-    this.isExpanded = false;
-  }
-
-  @action
-  updateSearch(event) {
-    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() {
-    const { className } = this.args;
-    return ' ' + className;
-  }
-}

package/addon/components/pix-select.hbs

@@ -1,91 +0,0 @@
-<div
-  class={{this.rootClassNames}}
-  id="container-{{this.selectId}}"
-  {{on-click-outside this.hideDropdown}}
-  {{on-arrow-down-up-action this.listId this.showDropdown this.isExpanded}}
-  {{on-escape-action this.hideDropdown this.selectId}}
-  {{on "keydown" this.lockTab}}
-  ...attributes
->
-  {{#if (has-block "label")}}
-    <PixLabel
-      @for={{this.selectId}}
-      @requiredLabel={{@requiredLabel}}
-      @subLabel={{@subLabel}}
-      @size={{@size}}
-      @screenReaderOnly={{@screenReaderOnly}}
-      @inlineLabel={{@inlineLabel}}
-    >
-      {{yield to="label"}}
-    </PixLabel>
-  {{/if}}
-
-  <div class="pix-select__button-container">
-    <PopperJS @placement={{or @placement "bottom-start"}} as |reference popover|>
-      <button
-        {{reference}}
-        type="button"
-        id={{this.selectId}}
-        class={{this.buttonClassName}}
-        {{on "click" this.toggleDropdown}}
-        aria-expanded={{this.isAriaExpanded}}
-        aria-controls={{this.listId}}
-        aria-disabled={{@isDisabled}}
-      >
-        {{#if @iconName}}
-          <PixIcon
-            @name={{@iconName}}
-            @plainIcon={{@plainIcon}}
-            @ariaHidden={{true}}
-            class="pix-select-button__icon"
-          />
-        {{/if}}
-
-        <span class="pix-select-button__text">{{this.placeholder}}</span>
-
-        <PixIcon
-          class="pix-select-button__dropdown-icon"
-          @ariaHidden={{true}}
-          @name={{if this.isExpanded "chevronTop" "chevronBottom"}}
-        />
-      </button>
-      <div
-        {{popover}}
-        class="pix-select__dropdown {{unless this.isExpanded ' pix-select__dropdown--closed'}}"
-        {{on "transitionend" this.focus}}
-      >
-        {{#if @isSearchable}}
-          <div class="pix-select__search">
-            <PixIcon class="pix-select-search__icon" @name="search" @ariaHidden={{true}} />
-            <label class="screen-reader-only" for={{this.searchId}}>{{@searchLabel}}</label>
-            <input
-              class="pix-select-search__input"
-              id={{this.searchId}}
-              autocomplete="off"
-              tabindex={{if this.isExpanded "0" "-1"}}
-              placeholder={{@searchPlaceholder}}
-              {{on "input" this.setSearchValue}}
-            />
-          </div>
-        {{/if}}
-        <PixSelectList
-          @hideDefaultOption={{@hideDefaultOption}}
-          @listId={{this.listId}}
-          @value={{@value}}
-          @displayDefaultOption={{this.displayDefaultOption}}
-          @searchValue={{this.searchValue}}
-          @onChange={{this.onChange}}
-          @defaultOption={{this.defaultOption}}
-          @selectId={{this.selectId}}
-          @isExpanded={{this.isExpanded}}
-          @options={{@options}}
-          @defaultOptionValue={{@placeholder}}
-          @emptySearchMessage={{@emptySearchMessage}}
-        />
-      </div>
-    </PopperJS>
-    {{#if @errorMessage}}
-      <p class="pix-select__error-message">{{@errorMessage}}</p>
-    {{/if}}
-  </div>
-</div>

package/addon/components/pix-select.js

@@ -1,144 +0,0 @@
-import { action } from '@ember/object';
-import { guidFor } from '@ember/object/internals';
-import { inject as service } from '@ember/service';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class PixSelect extends Component {
-  @service elementHelper;
-  @tracked isExpanded = false;
-  @tracked searchValue = null;
-
-  constructor(...args) {
-    super(...args);
-
-    this.searchId = 'search-input-' + guidFor(this);
-    this.selectId = this.args.id ? this.args.id : 'select-' + guidFor(this);
-    this.listId = `listbox-${this.selectId}`;
-
-    if (!this.args.isComputeWidthDisabled) {
-      this.elementHelper.waitForElement(this.listId).then((elementList) => {
-        const baseFontRemRatio = Number(
-          getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
-        );
-        const listWidth = elementList.getBoundingClientRect().width;
-        const selectWidth = listWidth / baseFontRemRatio;
-
-        const element = document.getElementById(`container-${this.selectId}`);
-        element.style.setProperty('--pix-select-width', `${selectWidth + 0.5}rem`); // Fix for FF
-      });
-    }
-  }
-
-  get displayDefaultOption() {
-    return !this.searchValue && !this.args.hideDefaultOption;
-  }
-
-  get buttonClassName() {
-    const buttonClasses = ['pix-select-button'];
-    if (this.args.className) {
-      buttonClasses.push(this.args.className);
-    }
-    if (this.args.errorMessage) {
-      buttonClasses.push('pix-select-button--error');
-    }
-
-    return buttonClasses.join(' ');
-  }
-
-  get rootClassNames() {
-    const classes = ['pix-select'];
-    if (this.args.inlineLabel) {
-      classes.push('pix-select--inline');
-    }
-
-    if (this.args.isFullWidth) {
-      classes.push('pix-select--full-width');
-    }
-
-    return classes.join(' ');
-  }
-
-  get isAriaExpanded() {
-    return this.isExpanded ? 'true' : 'false';
-  }
-
-  get placeholder() {
-    if (!this.args.value) return this.args.placeholder;
-    const option = this.args.options.find((option) => option.value === this.args.value);
-    return option ? option.label : this.args.placeholder;
-  }
-
-  get defaultOption() {
-    return {
-      value: '',
-    };
-  }
-
-  @action
-  toggleDropdown(event) {
-    if (this.isExpanded) {
-      this.hideDropdown(event);
-    } else {
-      this.showDropdown(event);
-    }
-  }
-
-  @action
-  showDropdown(event) {
-    event.preventDefault();
-    if (this.args.isDisabled) return;
-
-    this.isExpanded = true;
-  }
-
-  @action
-  hideDropdown(event) {
-    if (this.isExpanded) {
-      event.preventDefault();
-
-      this.isExpanded = false;
-    }
-  }
-
-  @action
-  onChange(option, event) {
-    if (this.args.isDisabled) return;
-
-    this.args.onChange(option.value);
-
-    this.hideDropdown(event);
-    document.getElementById(this.selectId).focus();
-  }
-
-  @action
-  setSearchValue(event) {
-    if (this.args.onSearch) {
-      this.args.onSearch(event.target.value);
-      return;
-    }
-    this.searchValue = event.target.value.trim();
-  }
-
-  @action
-  lockTab(event) {
-    if (event.code === 'Tab' && this.isExpanded) {
-      event.preventDefault();
-      if (this.args.isSearchable) document.getElementById(this.searchId).focus();
-    }
-  }
-
-  @action
-  focus(event) {
-    if (!event.target) return;
-    if (!this.isExpanded) return;
-
-    if (this.args.value) {
-      event.target.querySelector("[aria-selected='true']")?.focus();
-    } else if (this.args.isSearchable) {
-      event.target.querySelector(`#${this.searchId}`)?.focus();
-    } else if (this.displayDefaultOption) {
-      event.target.querySelector("[aria-selected='true']")?.focus();
-    }
-  }
-}