@1024pix/pix-ui 67.0.3 → 68.0.0

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

@@ -1,3 +1,4 @@
+import { hash } from '@ember/helper';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import { inject as service } from '@ember/service';
@@ -109,12 +110,11 @@ export default class PixFilterableAndSearchableSelect extends Component {
         </PixMultiSelect>
         <PixSelect
           @id={{this.pixSelectId}}
-          @placeholder={{@placeholder}}
+          @texts={{hash placeholder=@placeholder selectSearchLabel=@searchLabel}}
           @value={{@value}}
           @options={{this.selectableOptions}}
           @onChange={{@onChange}}
           @isSearchable={{@isSearchable}}
-          @searchLabel={{@searchLabel}}
           @screenReaderOnly={{true}}
           @hideDefaultOption={{@hideDefaultOption}}
           @className="pix-filterable-and-searchable-select__pix-select"

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

@@ -13,26 +13,66 @@ 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();
-}
+/**
+ * @typedef {object} PixMultiSelectOption
+ * @property {string} value - Valeur de l'option.
+ * @property {string} label - Texte affiché.
+ */
+
+/**
+ * @typedef {object} PixMultiSelectTexts
+ * @property {string} placeholder - Texte affiché tant qu'aucune option n'est sélectionnée. Obligatoire.
+ * @property {string} [requiredLabel] - Rend le champ obligatoire et affiche un astérisque, dont ce texte est l'infobulle.
+ * @property {string} [subLabel] - Complément d'information affiché sous le libellé.
+ * @property {string} [searchLabel] - Intitulé du champ de recherche, lu par les lecteurs d'écran (accessible uniquement).
+ * @property {string} [searchPlaceholder] - Texte indicatif affiché dans le champ de recherche.
+ * @property {string} [emptySearchMessage] - Message affiché quand aucune option ne correspond à la recherche.
+ */
+
+/**
+ * @typedef {object} PixMultiSelectArgs
+ * @property {PixMultiSelectOption[]} options - Options proposées. Obligatoire.
+ * @property {string[]} [values] - Valeurs des options sélectionnées.
+ * @property {PixMultiSelectTexts} texts - Textes du composant. Obligatoire.
+ * @property {(values: string[]) => unknown} [onChange] - Appelée avec la liste complète des valeurs sélectionnées à chaque changement.
+ * @property {string} [id] - Identifiant du champ. Généré automatiquement s'il n'est pas fourni.
+ * @property {boolean} [isDisabled] - Désactive le champ.
+ * @property {boolean} [isSearchable] - Ajoute un champ de recherche en tête de liste.
+ * @property {(value: string) => unknown} [onSearch] - Prend en charge la recherche à la place du filtrage interne, pour interroger un serveur par exemple.
+ * @property {'small' | 'default' | 'large'} [size] - Taille du libellé. Par défaut : `default`.
+ * @property {boolean} [screenReaderOnly] - Masque le libellé visuellement, tout en le laissant lisible par les lecteurs d'écran.
+ * @property {boolean} [inlineLabel] - Place le libellé sur la même ligne que le champ.
+ * @property {string} [className] - Classes CSS ajoutées au bouton d'ouverture.
+ * @property {string} [placement] - Position de la liste par rapport au champ, au sens de Popper. Par défaut : `bottom-start`.
+ * @property {boolean} [isComputeWidthDisabled] - Désactive l'alignement automatique de la largeur du champ sur celle de la liste.
+ */
+
+/**
+ * @typedef {object} PixMultiSelectSignature
+ * @property {HTMLDivElement} Element
+ * @property {PixMultiSelectArgs} Args
+ * @property {{ label: [], placeholder: [], default: [PixMultiSelectOption] }} Blocks
+ */
 
 export default class PixMultiSelect extends Component {
   @tracked isExpanded = false;
-  @tracked searchData;
   @service elementHelper;
 
   constructor(...args) {
     super(...args);
 
+    warn(
+      'PixMultiSelect: @texts.placeholder attribute is mandatory for usability. if you not using placeholder {{yield}}',
+      Boolean(this.args.texts?.placeholder),
+      {
+        id: 'pix-ui.select-placeholder.mandatory',
+      },
+    );
+
     this.searchId = 'search-input-' + guidFor(this);
     this.multiSelectId = this.args.id ? this.args.id : 'select-' + guidFor(this);
     this.listId = `list-${this.multiSelectId}`;
@@ -49,14 +89,6 @@ export default class PixMultiSelect extends Component {
         element.style.setProperty('--pix-multi-select-width', `${selectWidth}rem`);
       });
     }
-
-    warn(
-      `PixMultiSelect: @strictSearch is deprecated in favour of @onSearch`,
-      !this.args.strictSearch,
-      {
-        id: 'pix-ui.pix-multi-select.strictSearch.deprecated',
-      },
-    );
   }
 
   get options() {
@@ -73,19 +105,36 @@ export default class PixMultiSelect extends Component {
     return classes;
   }
 
+  get searchLabel() {
+    return this.args.texts?.searchLabel;
+  }
+
+  get searchPlaceholder() {
+    return this.args.texts?.searchPlaceholder;
+  }
+
+  get emptySearchMessage() {
+    return this.args.texts?.emptySearchMessage;
+  }
+
+  get requiredLabel() {
+    return this.args.texts?.requiredLabel;
+  }
+
+  get subLabel() {
+    return this.args.texts?.subLabel;
+  }
+
   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;
+    const { values, texts } = this.args;
     if (values?.length > 0) {
       const selectedOptionLabels = this.options
         .filter((option) => {
@@ -96,14 +145,7 @@ export default class PixMultiSelect extends Component {
         .join(', ');
       return selectedOptionLabels;
     }
-    return placeholder;
-  }
-
-  _search(label) {
-    if (this.args.strictSearch) {
-      return label.includes(this.searchData);
-    }
-    return removeCapitalizeAndDiacritics(label).includes(this.searchData);
+    return texts?.placeholder;
   }
 
   @action
@@ -148,13 +190,7 @@ export default class PixMultiSelect extends Component {
 
   @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.args.onSearch(event.target.value);
   }
 
   @action
@@ -167,10 +203,6 @@ export default class PixMultiSelect extends Component {
     return ' ' + className;
   }
 
-  get selectSearchLabel() {
-    return formatMessage(this.args.locale ?? 'fr', 'select.search');
-  }
-
   @action
   focus(event) {
     if (!event.target) return;
@@ -192,8 +224,8 @@ export default class PixMultiSelect extends Component {
     >
       <PixLabel
         @for={{this.multiSelectId}}
-        @requiredLabel={{@requiredLabel}}
-        @subLabel={{@subLabel}}
+        @requiredLabel={{this.requiredLabel}}
+        @subLabel={{this.subLabel}}
         @size={{@size}}
         @screenReaderOnly={{@screenReaderOnly}}
         @inlineLabel={{@inlineLabel}}
@@ -216,7 +248,7 @@ export default class PixMultiSelect extends Component {
           >
             {{#if (has-block "placeholder")}}
               <span class="pix-multi-select__placeholder">{{yield to="placeholder"}}</span>
-            {{else if @placeholder}}
+            {{else}}
               <span class="pix-multi-select__placeholder">{{this.placeholder}}</span>
             {{/if}}
             <PixIcon
@@ -239,14 +271,14 @@ export default class PixMultiSelect extends Component {
               <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}}
+                  {{this.searchLabel}}
                 </label>
                 <input
                   class="pix-select-search__input"
                   id={{this.searchId}}
                   autocomplete="off"
                   tabindex={{if this.isExpanded "0" "-1"}}
-                  placeholder={{@searchPlaceholder}}
+                  placeholder={{this.searchPlaceholder}}
                   {{on "input" this.updateSearch}}
                 />
               </li>
@@ -271,7 +303,7 @@ export default class PixMultiSelect extends Component {
             {{else}}
               <li
                 class="pix-multi-select-list__item pix-multi-select-list__item--no-result"
-              >{{@emptyMessage}}</li>
+              >{{this.emptySearchMessage}}</li>
             {{/if}}
           </ul>
         </PopperJS>

package/addon/components/pix-select.gjs

@@ -1,3 +1,4 @@
+import { warn } from '@ember/debug';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
@@ -10,11 +11,59 @@ 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';
 
+/**
+ * @typedef {object} PixSelectOption
+ * @property {string} value - Valeur de l'option.
+ * @property {string} label - Texte affiché.
+ * @property {string} [category] - Regroupe l'option sous une catégorie, affichée comme intertitre dans la liste.
+ * @property {string} [icon] - Nom d'une icône affichée avant le texte.
+ * @property {string} [iconTitle] - Description de l'icône pour les lecteurs d'écran.
+ */
+
+/**
+ * @typedef {object} PixSelectTexts
+ * @property {string} placeholder - Texte affiché tant qu'aucune option n'est sélectionnée. Obligatoire.
+ * @property {string} [requiredLabel] - Rend le champ obligatoire et affiche un astérisque, dont ce texte est l'infobulle.
+ * @property {string} [subLabel] - Complément d'information affiché sous le libellé.
+ * @property {string} [selectSearchLabel] - Intitulé du champ de recherche, lu par les lecteurs d'écran (accessible uniquement).
+ * @property {string} [searchPlaceholder] - Texte indicatif affiché dans le champ de recherche.
+ * @property {string} [emptySearchMessage] - Message affiché quand aucune option ne correspond à la recherche.
+ */
+
+/**
+ * @typedef {object} PixSelectArgs
+ * @property {PixSelectOption[]} options - Options proposées. Obligatoire.
+ * @property {(value: string) => unknown} onChange - Appelée avec la valeur de l'option choisie. Obligatoire.
+ * @property {PixSelectTexts} texts - Textes du composant. Obligatoire.
+ * @property {string} [value] - Valeur de l'option sélectionnée.
+ * @property {string} [id] - Identifiant du champ. Généré automatiquement s'il n'est pas fourni.
+ * @property {boolean} [isDisabled] - Désactive le champ.
+ * @property {boolean} [isSearchable] - Ajoute un champ de recherche en tête de liste.
+ * @property {(value: string) => unknown} [onSearch] - Prend en charge la recherche à la place du filtrage interne, pour interroger un serveur par exemple.
+ * @property {boolean} [hideDefaultOption] - Retire l'option qui permet de revenir à « aucun choix ».
+ * @property {string} [iconName] - Nom d'une icône affichée dans le champ, avant le texte.
+ * @property {boolean} [plainIcon] - Affiche `iconName` dans sa variante pleine.
+ * @property {'small' | 'default' | 'large'} [size] - Taille du libellé. Par défaut : `default`.
+ * @property {boolean} [screenReaderOnly] - Masque le libellé visuellement, tout en le laissant lisible par les lecteurs d'écran.
+ * @property {boolean} [inlineLabel] - Place le libellé sur la même ligne que le champ.
+ * @property {boolean} [isFullWidth] - Étend le champ à toute la largeur disponible.
+ * @property {string} [errorMessage] - Message d'erreur affiché sous le champ. Sa présence applique le style d'erreur.
+ * @property {string} [className] - Classes CSS ajoutées au bouton d'ouverture.
+ * @property {string} [placement] - Position de la liste par rapport au champ, au sens de Popper. Par défaut : `bottom-start`.
+ * @property {boolean} [isComputeWidthDisabled] - Désactive l'alignement automatique de la largeur du champ sur celle de la liste.
+ */
+
+/**
+ * @typedef {object} PixSelectSignature
+ * @property {HTMLDivElement} Element
+ * @property {PixSelectArgs} Args
+ * @property {{ label: [] }} Blocks
+ */
+
 export default class PixSelect extends Component {
   @service elementHelper;
   @tracked isExpanded = false;
@@ -22,6 +71,13 @@ export default class PixSelect extends Component {
 
   constructor(...args) {
     super(...args);
+    warn(
+      'PixSelect: @texts.placeholder attribute is mandatory for usability.',
+      Boolean(this.args.texts?.placeholder),
+      {
+        id: 'pix-ui.select-placeholder.mandatory',
+      },
+    );
 
     this.searchId = 'search-input-' + guidFor(this);
     this.selectId = this.args.id ? this.args.id : 'select-' + guidFor(this);
@@ -41,10 +97,6 @@ export default class PixSelect extends Component {
     }
   }
 
-  get selectSearchLabel() {
-    return formatMessage(this.args.locale ?? 'fr', 'select.search');
-  }
-
   get displayDefaultOption() {
     return !this.searchValue && !this.args.hideDefaultOption;
   }
@@ -79,9 +131,9 @@ export default class PixSelect extends Component {
   }
 
   get placeholder() {
-    if (!this.args.value) return this.args.placeholder;
+    if (!this.args.value) return this.args.texts?.placeholder;
     const option = this.args.options.find((option) => option.value === this.args.value);
-    return option ? option.label : this.args.placeholder;
+    return option ? option.label : this.args.texts?.placeholder;
   }
 
   get defaultOption() {
@@ -170,8 +222,8 @@ export default class PixSelect extends Component {
       {{#if (has-block "label")}}
         <PixLabel
           @for={{this.selectId}}
-          @requiredLabel={{@requiredLabel}}
-          @subLabel={{@subLabel}}
+          @requiredLabel={{@texts.requiredLabel}}
+          @subLabel={{@texts.subLabel}}
           @size={{@size}}
           @screenReaderOnly={{@screenReaderOnly}}
           @inlineLabel={{@inlineLabel}}
@@ -219,14 +271,14 @@ export default class PixSelect extends Component {
               <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}}
+                  {{@texts.selectSearchLabel}}
                 </label>
                 <input
                   class="pix-select-search__input"
                   id={{this.searchId}}
                   autocomplete="off"
                   tabindex={{if this.isExpanded "0" "-1"}}
-                  placeholder={{@searchPlaceholder}}
+                  placeholder={{@texts.searchPlaceholder}}
                   {{on "input" this.setSearchValue}}
                 />
               </div>
@@ -242,8 +294,8 @@ export default class PixSelect extends Component {
               @selectId={{this.selectId}}
               @isExpanded={{this.isExpanded}}
               @options={{@options}}
-              @defaultOptionValue={{@placeholder}}
-              @emptySearchMessage={{@emptySearchMessage}}
+              @defaultOptionValue={{@texts.placeholder}}
+              @emptySearchMessage={{@texts.emptySearchMessage}}
             />
           </div>
         </PopperJS>

package/app/components/pix-checkbox.js

@@ -1,4 +1 @@
-// WORKAROUND: necessary for storybook to resolve the import
-import '@formatjs/intl';
-
 export { default } from '@1024pix/pix-ui/components/pix-checkbox';

package/app/components/pix-gauge.js

@@ -1,4 +1 @@
-// WORKAROUND: necessary for storybook to resolve the import
-import '@formatjs/intl';
-
 export { default } from '@1024pix/pix-ui/components/pix-gauge';

package/app/components/pix-pagination.js

@@ -1,4 +1 @@
-// WORKAROUND: necessary for storybook to resolve the import
-import '@formatjs/intl';
-
 export { default } from '@1024pix/pix-ui/components/pix-pagination';

package/app/components/pix-radio-button.js

@@ -1,4 +1 @@
-// WORKAROUND: necessary for storybook to resolve the import
-import '@formatjs/intl';
-
 export { default } from '@1024pix/pix-ui/components/pix-radio-button';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "67.0.3",
+  "version": "68.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -61,7 +61,6 @@
   },
   "dependencies": {
     "@babel/core": "^7.25.2",
-    "@formatjs/intl": "^4.0.0",
     "check-engine": "^1.14.0",
     "ember-auto-import": "^2.7.4",
     "ember-cli-babel": "^8.2.0",
@@ -117,7 +116,6 @@
     "eslint": "^9.21.0",
     "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-ember": "^12.5.0",
-    "eslint-plugin-i18n-json": "^4.0.1",
     "eslint-plugin-n": "^17.16.2",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-qunit": "^8.1.2",

package/addon/translations/en.js

@@ -1,5 +0,0 @@
-export default {
-  select: {
-    search: 'Search',
-  },
-};

package/addon/translations/es-419.js

@@ -1,5 +0,0 @@
-export default {
-  select: {
-    search: 'Buscar',
-  },
-};

package/addon/translations/es.js

@@ -1,5 +0,0 @@
-export default {
-  select: {
-    search: 'Buscar',
-  },
-};

package/addon/translations/fr.js

@@ -1,5 +0,0 @@
-export default {
-  select: {
-    search: 'Rechercher',
-  },
-};

package/addon/translations/index.js

@@ -1,49 +0,0 @@
-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';
-
-export function formatMessage(locale, message, values) {
-  const intl = locales[locale] || locales.en;
-  return intl.formatMessage({ id: message }, values);
-}
-
-const locales = {
-  fr: createIntl({
-    locale: 'fr',
-    messages: flattenObject(fr),
-  }),
-  en: createIntl({
-    locale: 'en',
-    messages: flattenObject(en),
-  }),
-  nl: createIntl({
-    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) {
-  const entries = Object.entries(object);
-
-  const flatEntries = entries.flatMap(([key, value]) => {
-    if (typeof value !== 'object') return [[key, value]];
-
-    const childEntries = Object.entries(flattenObject(value));
-
-    return childEntries.map(([childKey, childValue]) => [`${key}.${childKey}`, childValue]);
-  });
-
-  return Object.fromEntries(flatEntries);
-}

package/addon/translations/nl.js

@@ -1,5 +0,0 @@
-export default {
-  select: {
-    search: 'Zoeken',
-  },
-};