@1024pix/pix-ui 20.2.3 → 21.0.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Pix-UI Changelog
 
+## v21.0.0 (05/12/2022)
+
+
+### :rocket: Amélioration
+- [#289](https://github.com/1024pix/pix-ui/pull/289) [FEATURE] Ajouter le composant PixFilterableAndSearchableSelect (PIX-6026)
+- [#291](https://github.com/1024pix/pix-ui/pull/291) [FEATURE] Ajoute la possibilité d'utiliser un block à la place du placeholder (PIX-6443)
+- [#290](https://github.com/1024pix/pix-ui/pull/290) [FEATURE] Ajoute une propriété id sur le composant PixSelect (PIX-6440)
+
+### :building_construction: Tech
+- [#286](https://github.com/1024pix/pix-ui/pull/286) [TECH] Mettre à jour les paquets non bloquants (PIX-6419).
+- [#274](https://github.com/1024pix/pix-ui/pull/274) [TECH] Utiliser la dernière version mineure de NodeJs automatiquement
+
+### :bug: Correction
+- [#298](https://github.com/1024pix/pix-ui/pull/298) [BUGFIX] Rétrograder la version  d'ember click outside à la 4.0.0 (PIX-6482)
+- [#296](https://github.com/1024pix/pix-ui/pull/296) [BUGFIX] Le select ne prend pas le focus quand on clique sur son label (PIX-6476).
+- [#281](https://github.com/1024pix/pix-ui/pull/281) [BUGFIX] Autorise d'autres événements de la page à avoir lieu lors de l'ouverture/fermeture du select (PIX-6399)
+
+### :coffee: Autre
+- [#284](https://github.com/1024pix/pix-ui/pull/284) [BREAKING CHANGES][TECH] Supprime la propriété onLoadOptions sur le composant PixMultiSelect (PIX-6418)
+- [#280](https://github.com/1024pix/pix-ui/pull/280) [BUG] Empêche le composant PixSelect de capturer le focus à chaque click sur la page (PIX-6397)
+- [#278](https://github.com/1024pix/pix-ui/pull/278) [BREAKING CHANGES][TECH] Améliorer le composant PixMultiSelect (Pix-6025)
+- [#266](https://github.com/1024pix/pix-ui/pull/266) [BREAKING CHANGES][FEATURE] Créer un nouveau PixSelect accessible basé sur PixDropdown/PixSelect (Pix-6018)
+
 ## v20.2.3 (15/11/2022)
 
 

package/addon/components/pix-dropdown.hbs

@@ -37,14 +37,14 @@
       </button>
     {{/if}}
 
-    <div
-      role="button"
+    <button
+      type="button"
       tabindex="-1"
       class="pix-dropdown__controller--chevron"
       {{on "click" this.toggleDropdown}}
     >
       <FaIcon @icon={{if this.isExpanded "chevron-up" "chevron-down"}} />
-    </div>
+    </button>
   </div>
 
   <div
@@ -55,7 +55,6 @@
     aria-labelledby={{if this.label @id}}
     aria-label={{unless this.label @placeholder}}
     aria-hidden={{if this.isExpanded "false" "true"}}
-    aria-activedescendant={{if this.selectedOption this.selectedOption.value}}
     {{on "keyup" this.navigateThroughOptions}}
     {{on "scroll" this.incrementPage}}
   >

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

@@ -0,0 +1,45 @@
+<div>
+  <div class="{{if @screenReaderOnly 'screen-reader-only'}}">
+    <label class="pix-filterable-and-searchable-select__label" for={{this.id}}>
+      {{#if @requiredText}}
+        <abbr class="mandatory-mark" title="{{@requiredText}}" aria-hidden="true">*</abbr>
+      {{/if}}
+      {{@label}}
+    </label>
+    {{#if @subLabel}}
+      <span class="pix-select__sub-label">{{@subLabel}}</span>
+    {{/if}}
+  </div>
+  <div
+    class="pix-filterable-and-searchable-select{{if
+        @errorMessage
+        ' pix-filterable-and-searchable-select--error'
+      }}"
+  >
+    <PixMultiSelect
+      @values={{this.selectedCategories}}
+      @label={{@categoriesLabel}}
+      @options={{this.categories}}
+      @onChange={{this.selectCategories}}
+      @screenReaderOnly={{true}}
+      @className="pix-filterable-and-searchable-select__pix-multi-select"
+    >
+      <:placeholder>{{this.categoriesPlaceholder}}</:placeholder>
+      <:default as |option|>{{option.label}}</:default>
+    </PixMultiSelect>
+    <PixSelect
+      @id={{this.id}}
+      @placeholder={{@placeholder}}
+      @value={{@value}}
+      @options={{this.selectableOptions}}
+      @onChange={{@onChange}}
+      @isSearchable={{@isSearchable}}
+      @searchLabel={{@searchLabel}}
+      @screenReaderOnly={{true}}
+      @className="pix-filterable-and-searchable-select__pix-select"
+    />
+  </div>
+  {{#if @errorMessage}}
+    <p class="pix-filterable-and-searchable-select__error-message">{{@errorMessage}}</p>
+  {{/if}}
+</div>

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

@@ -0,0 +1,48 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+
+export default class PixFilterableAndSearchableSelect extends Component {
+  @tracked selectedCategories = [];
+
+  id = 'pix-filterable-and-searchable-select' + guidFor(this);
+
+  @action
+  selectCategories(categories) {
+    this.selectedCategories = categories;
+  }
+
+  get categories() {
+    const categoryNames = [];
+    this.args.options.forEach((option) => {
+      if (!categoryNames.includes(option.category)) {
+        categoryNames.push(option.category);
+      }
+    });
+
+    return categoryNames.map((category) => {
+      return { label: category, value: category };
+    });
+  }
+
+  get categoriesPlaceholder() {
+    return `${this.args.categoriesPlaceholder} (${this.selectedCategories.length})`;
+  }
+
+  get selectableOptions() {
+    const selectableOptions = [];
+    const categories =
+      this.selectedCategories.length === 0
+        ? this.categories.map(({ value }) => value)
+        : this.selectedCategories;
+
+    this.args.options.forEach((option) => {
+      if (categories.includes(option.category)) {
+        selectableOptions.push(option);
+      }
+    });
+
+    return selectableOptions;
+  }
+}

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

@@ -2,23 +2,25 @@
   class="pix-multi-select"
   {{on-click-outside this.hideDropDown}}
   {{on-arrow-down-up-action this.listId this.showDropDown this.isExpanded}}
-  {{on-escape-action this.hideDropDown @id}}
+  {{on-escape-action this.hideDropDown this.multiSelectId}}
 >
 
-  {{#if @isSearchable}}
+  {{#if @label}}
     <label
-      for={{@id}}
+      for={{this.multiSelectId}}
       class="pix-multi-select__label{{if @screenReaderOnly ' screen-reader-only'}}"
     >{{@label}}</label>
-    <span class="pix-multi-select-header">
+  {{/if}}
+  {{#if @isSearchable}}
+    <span class="pix-multi-select-header{{if @className this.className}}">
       <FaIcon @icon="magnifying-glass" class="pix-multi-select-header__search-icon" />
 
       <input
         class="pix-multi-select-header__search-input"
-        id={{@id}}
+        id={{this.multiSelectId}}
         type="text"
-        name={{@id}}
-        placeholder={{this.innerText}}
+        name={{this.multiSelectId}}
+        placeholder={{this.placeholder}}
         autocomplete="off"
         {{on "input" this.updateSearch}}
         {{on "click" this.toggleDropDown}}
@@ -29,23 +31,21 @@
       />
     </span>
   {{else}}
-    <span
-      id={{this.labelId}}
-      class="pix-multi-select__label{{if @screenReaderOnly ' screen-reader-only'}}"
-    >{{@label}}</span>
-
     <button
-      aria-labelledby={{this.labelId}}
-      id={{@id}}
+      id={{this.multiSelectId}}
       type="button"
       aria-expanded={{this.isAriaExpanded}}
       aria-controls={{this.listId}}
       aria-haspopup="menu"
-      class="pix-multi-select-header"
+      class="pix-multi-select-header{{if @className this.className}}"
       {{on "click" this.toggleDropDown}}
       ...attributes
     >
-      {{this.innerText}}
+      {{#if (has-block "placeholder")}}
+        {{yield to="placeholder"}}
+      {{else if @placeholder}}
+        {{this.placeholder}}
+      {{/if}}
       <FaIcon
         class="pix-multi-select-header__dropdown-icon
           {{if this.isExpanded ' pix-multi-select-header__dropdown-icon--expand'}}"
@@ -57,28 +57,24 @@
   <ul
     class="pix-multi-select-list {{unless this.isExpanded 'pix-multi-select-list--hidden'}}"
     id={{this.listId}}
-    aria-multiselectable="true"
     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 @id "-" option.value}}
+            @id={{concat this.multiSelectId "-" option.value}}
             @checked={{option.checked}}
+            @labelSize="small"
             value={{option.value}}
             {{on "change" this.onSelect}}
-            {{on-enter-action this.hideDropDown @id}}
+            {{on-enter-action this.hideDropDown this.multiSelectId}}
             tabindex={{if this.isExpanded "0" "-1"}}
           >
             {{yield option}}
           </PixCheckbox>
         </li>
       {{/each}}
-    {{else if this.isLoadingOptions}}
-      <li
-        class="pix-multi-select-list__item pix-multi-select-list__item--no-result"
-      >{{@loadingMessage}}</li>
     {{else}}
       <li
         class="pix-multi-select-list__item pix-multi-select-list__item--no-result"

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

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
 
 function sortOptionsByCheckedFirst(a, b) {
   if (a.checked && b.checked) return 0;
@@ -22,47 +23,23 @@ export default class PixMultiSelect extends Component {
   @tracked searchData;
 
   @tracked options = [];
-  @tracked isLoadingOptions = false;
 
   constructor(...args) {
     super(...args);
-    const { onLoadOptions, id, label, innerText } = this.args;
 
-    const idIsNotDefined = !id || !id.trim();
-    const labelIsNotDefined = !label || !label.trim();
-    const innerTextIsNotDefined = !innerText || !innerText.trim();
+    if (!this.args.label && !this.args.id)
+      throw new Error('ERROR in PixMultiSelect, a @label or an @id was not provided');
 
-    if (idIsNotDefined || labelIsNotDefined || innerTextIsNotDefined) {
-      const missingParams = [];
-
-      if (idIsNotDefined) missingParams.push('@id');
-      if (labelIsNotDefined) missingParams.push('@label');
-      if (innerTextIsNotDefined) missingParams.push('@innerText');
-
-      throw new Error(
-        `ERROR in PixMultiSelect component, ${missingParams.join(', ')} ${
-          missingParams.length > 1 ? 'params are' : 'param is'
-        } necessary`
-      );
-    }
-
-    if (onLoadOptions) {
-      this.isLoadingOptions = true;
-      onLoadOptions().then((options = []) => {
-        this.options = options;
-        this.isLoadingOptions = false;
-      });
-    } else {
-      this.options = [...(this.args.options || [])];
-    }
+    this.options = [...(this.args.options || [])];
   }
 
-  get listId() {
-    return `list-${this.args.id}`;
+  get multiSelectId() {
+    if (this.args.id) return this.args.id;
+    return 'select-' + guidFor(this);
   }
 
-  get labelId() {
-    return `label-${this.args.id}`;
+  get listId() {
+    return `list-${this.multiSelectId}`;
   }
 
   get isAriaExpanded() {
@@ -76,19 +53,19 @@ export default class PixMultiSelect extends Component {
     return this.options;
   }
 
-  get innerText() {
-    const { selected, innerText } = this.args;
-    if (selected?.length > 0) {
+  get placeholder() {
+    const { values, placeholder } = this.args;
+    if (values?.length > 0) {
       const selectedOptionLabels = this.options
-        .filter(({ value, label }) => {
-          const hasOption = selected.includes(value);
-          return hasOption && Boolean(label);
+        .filter((option) => {
+          const hasOption = values.includes(option.value);
+          return hasOption && Boolean(option.label);
         })
         .map(({ label }) => label)
         .join(', ');
       return selectedOptionLabels;
     }
-    return innerText;
+    return placeholder;
   }
 
   _setDisplayedOptions(selected, shouldSort) {
@@ -113,15 +90,15 @@ export default class PixMultiSelect extends Component {
 
   @action
   onSelect(event) {
-    let selected = [...(this.args.selected || [])];
+    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.onSelect) {
-      this.args.onSelect(selected);
+    if (this.args.onChange) {
+      this.args.onChange(selected);
     }
   }
 
@@ -138,7 +115,7 @@ export default class PixMultiSelect extends Component {
   showDropDown() {
     if (this.isExpanded) return;
     this.isExpanded = true;
-    this._setDisplayedOptions(this.args.selected, true);
+    this._setDisplayedOptions(this.args.values, true);
   }
 
   @action
@@ -159,7 +136,12 @@ export default class PixMultiSelect extends Component {
       : removeCapitalizeAndDiacritics(event.target.value);
     this.isExpanded = true;
     if (!event.target.value) {
-      this._setDisplayedOptions(this.args.selected, true);
+      this._setDisplayedOptions(this.args.values, true);
     }
   }
+
+  get className() {
+    const { className } = this.args;
+    return ' ' + className;
+  }
 }

package/addon/components/pix-pagination.hbs

@@ -2,7 +2,8 @@
   <section class="pix-pagination__size">
     <span class="pagination-size__label">{{this.beforeResultsPerPage}}</span>
     <PixSelect
-      aria-label={{this.selectPageSizeLabel}}
+      @label={{this.selectPageSizeLabel}}
+      @screenReaderOnly={{true}}
       class="pagination-size__choice"
       @selectedOption={{this.pageSize}}
       @onChange={{this.changePageSize}}

package/addon/components/pix-select.hbs

@@ -1,56 +1,145 @@
-<div class="pix-select">
+{{! template-lint-disable no-down-event-binding require-context-role require-presentational-children }}
+<div
+  class="pix-select"
+  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}}
+  {{did-insert this.setSelectWidth}}
+  {{on "keydown" this.lockTab}}
+>
+  {{#if @label}}
+    <div class="{{if @screenReaderOnly 'screen-reader-only'}}">
+      <label for={{this.selectId}} class="pix-select__label">
+        {{#if @requiredText}}
+          <abbr class="mandatory-mark" title="{{@requiredText}}" aria-hidden="true">*</abbr>
+        {{/if}}
+        {{@label}}
+      </label>
 
-  {{#if this.label}}
-    <label for={{@id}} class="pix-select__label">{{this.label}}</label>
+      {{#if @subLabel}}
+        <span class="pix-select__sub-label">{{@subLabel}}</span>
+      {{/if}}
+    </div>
   {{/if}}
 
-  {{#if @isSearchable}}
+  <button
+    type="button"
+    id={{this.selectId}}
+    class={{this.className}}
+    {{on "click" this.toggleDropdown}}
+    aria-expanded={{this.isAriaExpanded}}
+    aria-controls={{this.listId}}
+  >
+    {{this.placeholder}}
 
-    <input
-      id={{@id}}
-      list="{{this.datalistId}}"
-      {{on "input" this.onChange}}
-      class="{{if this.isValid 'pix-select--is-valid'}} {{if this.isBig 'pix-select--big'}}"
-      ...attributes
-      autocomplete="off"
+    <FaIcon
+      class="pix-select-button__dropdown-icon"
+      @icon={{if this.isExpanded "chevron-up" "chevron-down"}}
     />
+  </button>
+  <div
+    class="pix-select__dropdown{{unless this.isExpanded ' pix-select__dropdown--closed'}}"
+    id={{this.dropDownId}}
+    {{on "transitionend" this.focus}}
+  >
+    {{#if @isSearchable}}
+      <div class="pix-select__search">
+        <FaIcon class="pix-select-search__icon" @icon="magnifying-glass" />
+        <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}}
+    <div role="listbox" id={{this.listId}} class="pix-select__options">
+      {{#if this.displayDefaultOption}}
+        <li
+          class="pix-select-options-category__option{{unless
+              @value
+              ' pix-select-options-category__option--selected'
+            }}"
+          role="option"
+          tabindex={{if this.isExpanded "0" "-1"}}
+          aria-selected={{if @value "false" "true"}}
+          {{on "click" (fn this.onChange this.defaultOption)}}
+          {{on-enter-action (fn this.onChange this.defaultOption)}}
+          {{on-space-action (fn this.onChange this.defaultOption)}}
+        >
+          {{@placeholder}}
+        </li>
+      {{/if}}
+      {{#if this.results}}
+        {{#if this.displayCategory}}
+          {{#each this.results as |element index|}}
+            <ul
+              class="pix-select-options__category"
+              role="group"
+              aria-labelledby={{if this.displayCategory (concat "cat-" this.selectId "-" index)}}
+            >
+              {{#if this.displayCategory}}
+                {{! template-lint-disable no-invalid-role }}
+                {{!https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-grouped.html}}
+                <li
+                  class="pix-select-options-category__name"
+                  role="presentation"
+                  id={{concat "cat-" this.selectId "-" index}}
+                >
+                  {{element.category}}
+                </li>
+              {{/if}}
 
-    <datalist id={{this.datalistId}}>
-      {{#each @options as |opt|}}
-        <option label={{opt.label}}>{{opt.label}}</option>
-      {{/each}}
-    </datalist>
-
-  {{else}}
+              {{#each element.options as |option|}}
+                <li
+                  class="pix-select-options-category__option{{if
+                      (eq option.value @value)
+                      ' pix-select-options-category__option--selected'
+                    }}"
+                  role="option"
+                  tabindex={{if this.isExpanded "0" "-1"}}
+                  aria-selected={{if (eq option.value @value) "true" "false"}}
+                  {{on "click" (fn this.onChange option)}}
+                  {{on-enter-action (fn this.onChange option)}}
+                  {{on-space-action (fn this.onChange option)}}
+                >
+                  {{option.label}}
 
-    <select
-      id={{@id}}
-      class="{{if this.isBig 'pix-select--big'}}"
-      {{on "change" this.onChange}}
-      ...attributes
-    >
-      {{#if (not-eq @emptyOptionLabel undefined)}}
-        {{#if @emptyOptionNotSelectable}}
-          <option value="" hidden>{{@emptyOptionLabel}}</option>
+                  <FaIcon @icon="check" />
+                </li>
+              {{/each}}
+            </ul>
+          {{/each}}
         {{else}}
-          <option value="">{{@emptyOptionLabel}}</option>
+          {{#each this.results as |option|}}
+            <li
+              class="pix-select-options-category__option{{if
+                  (eq option.value @value)
+                  ' pix-select-options-category__option--selected'
+                }}"
+              role="option"
+              tabindex={{if this.isExpanded "0" "-1"}}
+              aria-selected={{if (eq option.value @value) "true" "false"}}
+              {{on "click" (fn this.onChange option)}}
+              {{on-enter-action (fn this.onChange option)}}
+              {{on-space-action (fn this.onChange this.defaultOption)}}
+            >
+              {{option.label}}
+
+              <FaIcon @icon="check" />
+            </li>
+          {{/each}}
         {{/if}}
+      {{else}}
+        <p class="pix-select__empty-search-message">{{@emptySearchMessage}}</p>
       {{/if}}
-      {{#each @options as |opt|}}
-        {{#if (eq @selectedOption opt.value)}}
-          {{! https://github.com/emberjs/ember.js/issues/15484
-                ember-prop-modifier let us fix a bug about selected attribute in FireFox }}
-          <option value={{opt.value}} {{prop selected="true"}}>
-            {{opt.label}}
-          </option>
-        {{else}}
-          <option value={{opt.value}}>
-            {{opt.label}}
-          </option>
-        {{/if}}
-      {{/each}}
-    </select>
-    <FaIcon class="pix-select__icon" @icon="chevron-down" />
-
+    </div>
+  </div>
+  {{#if @errorMessage}}
+    <p class="pix-select__error-message">{{@errorMessage}}</p>
   {{/if}}
 </div>