[POC] Test Floating UI PixApp

mon-pix/app/components/authentication/oidc-provider-selector.gjs

@@ -1,4 +1,5 @@
 import PixSelect from '@1024pix/pix-ui/components/pix-select';
+import { hash } from '@ember/helper';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
@@ -33,9 +34,11 @@ export default class OidcProviderSelector extends Component {
       @locale={{this.locale.currentLocale}}
       @onChange={{this.onProviderChange}}
       @options={{this.providerOptions}}
-      @placeholder={{t "components.authentication.oidc-provider-selector.placeholder"}}
-      @searchLabel={{t "components.authentication.oidc-provider-selector.searchLabel"}}
-      @searchPlaceholder={{t "components.authentication.oidc-provider-selector.searchLabel"}}
+      @texts={{hash
+        placeholder=(t "components.authentication.oidc-provider-selector.placeholder")
+        searchLabel=(t "components.authentication.oidc-provider-selector.searchLabel")
+        searchPlaceholder=(t "components.authentication.oidc-provider-selector.searchLabel")
+      }}
       @value={{this.selectedIdentityProviderCode}}
       class="oidc-provider-selector"
       ...attributes

mon-pix/app/components/challenge-item/challenge-item-qroc.gjs

@@ -3,6 +3,7 @@ import PixInput from '@1024pix/pix-ui/components/pix-input';
 import PixNotificationAlert from '@1024pix/pix-ui/components/pix-notification-alert';
 import PixSelect from '@1024pix/pix-ui/components/pix-select';
 import PixTextarea from '@1024pix/pix-ui/components/pix-textarea';
+import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
@@ -41,15 +42,16 @@ export default class ChallengeItemQroc extends ChallengeItemGeneric {
                       data-uid="qroc-proposal-uid"
                       data-test="challenge-response-proposal-selector"
                       @isDisabled={{this.isAnswerFieldDisabled}}
-                      @label={{block.ariaLabel}}
                       @screenReaderOnly={{true}}
-                      @placeholder={{block.placeholder}}
+                      @texts={{hash placeholder=block.placeholder}}
                       @value={{this.qrocProposalAnswerValue}}
                       @hideDefaultOption={{true}}
                       @options={{block.options}}
                       @onChange={{this.onChangeSelect}}
                       @size="large"
-                    />
+                    >
+                      <:label>{{block.ariaLabel}}</:label>
+                    </PixSelect>
                   </div>
                 {{else if (eq @challenge.format "paragraphe")}}
                   <div class="challenge-response__proposal challenge-response__proposal--paragraph">

mon-pix/app/components/feedback-panel.gjs

@@ -3,6 +3,7 @@ import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import PixModal from '@1024pix/pix-ui/components/pix-modal';
 import PixSelect from '@1024pix/pix-ui/components/pix-select';
 import PixTextarea from '@1024pix/pix-ui/components/pix-textarea';
+import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
@@ -49,7 +50,9 @@ export default class FeedbackPanel extends Component {
                   <div class="feedback-panel__category-selection">
                     <PixSelect
                       @screenReaderOnly={{true}}
-                      @placeholder={{t "pages.challenge.feedback-panel.form.fields.category-selection.label"}}
+                      @texts={{hash
+                        placeholder=(t "pages.challenge.feedback-panel.form.fields.category-selection.label")
+                      }}
                       @options={{this.categories}}
                       @onChange={{this.displayCategoryOptions}}
                       @value={{this._currentMajorCategory}}
@@ -59,7 +62,9 @@ export default class FeedbackPanel extends Component {
                     {{#if this.displayQuestionDropdown}}
                       <PixSelect
                         @screenReaderOnly={{true}}
-                        @placeholder={{t "pages.challenge.feedback-panel.form.fields.detail-selection.label"}}
+                        @texts={{hash
+                          placeholder=(t "pages.challenge.feedback-panel.form.fields.detail-selection.label")
+                        }}
                         @onChange={{this.showFeedback}}
                         @options={{this.nextCategories}}
                         @value={{this._currentNextCategory}}

mon-pix/app/components/global/app-navigation.gjs

@@ -2,6 +2,7 @@ import PixButtonLink from '@1024pix/pix-ui/components/pix-button-link';
 import PixNavigation from '@1024pix/pix-ui/components/pix-navigation';
 import PixNavigationButton from '@1024pix/pix-ui/components/pix-navigation-button';
 import PixNavigationSeparator from '@1024pix/pix-ui/components/pix-navigation-separator';
+import { hash } from '@ember/helper';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
@@ -58,9 +59,11 @@ export default class AppNavigation extends Component {
   <template>
     <PixNavigation
       class="app-navigation"
-      @navigationAriaLabel={{t "navigation.nav-bar.aria-label"}}
-      @openLabel={{t "navigation.nav-bar.open"}}
-      @closeLabel={{t "navigation.nav-bar.close"}}
+      @texts={{hash
+        mainNavigation=(t "navigation.nav-bar.aria-label")
+        openMenu=(t "navigation.nav-bar.open")
+        closeMenu=(t "navigation.nav-bar.close")
+      }}
     >
       <:brand>
         <PixLogo @color="white" />

mon-pix/app/components/module/element/qrocm.gjs

@@ -2,7 +2,7 @@ import PixButton from '@1024pix/pix-ui/components/pix-button';
 import PixInput from '@1024pix/pix-ui/components/pix-input';
 import PixNotificationAlert from '@1024pix/pix-ui/components/pix-notification-alert';
 import PixSelect from '@1024pix/pix-ui/components/pix-select';
-import { fn, get } from '@ember/helper';
+import { fn, get, hash } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
@@ -213,7 +213,7 @@ export default class ModuleQrocm extends ModuleElement {
               >
                 <PixSelect
                   @value={{get this.selectedValues block.input}}
-                  @placeholder={{block.placeholder}}
+                  @texts={{hash placeholder=block.placeholder}}
                   @options={{block.options}}
                   @hideDefaultOption={{true}}
                   @onChange={{fn this.onSelectChanged block}}

mon-pix/app/components/module/layout/navigation.gjs

@@ -1,4 +1,5 @@
 import PixNavigation from '@1024pix/pix-ui/components/pix-navigation';
+import { hash } from '@ember/helper';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
@@ -66,9 +67,11 @@ export default class ModulixNavigation extends Component {
     <PixNavigation
       id="module-navigation"
       class="app-navigation module-navigation"
-      @navigationAriaLabel={{t "navigation.nav-bar.aria-label"}}
-      @openLabel={{t "navigation.nav-bar.open"}}
-      @closeLabel={{t "navigation.nav-bar.close"}}
+      @texts={{hash
+        mainNavigation=(t "navigation.nav-bar.aria-label")
+        openMenu=(t "navigation.nav-bar.open")
+        closeMenu=(t "navigation.nav-bar.close")
+      }}
       {{didInsert this.setHTMLElementOffset}}
     >
       <:brand>

mon-pix/app/components/proposals/qrocm-proposal.gjs

@@ -1,7 +1,7 @@
 import PixInput from '@1024pix/pix-ui/components/pix-input';
 import PixSelect from '@1024pix/pix-ui/components/pix-select';
 import PixTextarea from '@1024pix/pix-ui/components/pix-textarea';
-import { fn, get } from '@ember/helper';
+import { fn, get, hash } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
@@ -26,7 +26,7 @@ export default class QrocmProposal extends Component {
               data-test="challenge-response-proposal-selector"
               @isDisabled={{@isAnswerFieldDisabled}}
               @screenReaderOnly={{true}}
-              @placeholder={{block.placeholder}}
+              @texts={{hash placeholder=block.placeholder}}
               @value={{get @answersValue block.input}}
               @hideDefaultOption={{true}}
               @options={{block.options}}

mon-pix/app/components/ui/pagination-wrapper.gjs

@@ -0,0 +1,42 @@
+import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
+import { hash } from '@ember/helper';
+import Component from '@glimmer/component';
+import { t } from 'ember-intl';
+
+export default class PaginationWrapper extends Component {
+  get firstItemPosition() {
+    if (!this.args.pagination) return 0;
+
+    const { page, pageSize } = this.args.pagination;
+    return (page - 1) * pageSize + 1;
+  }
+
+  get lastItemPosition() {
+    if (!this.args.pagination) return 0;
+    const { rowCount, pageSize } = this.args.pagination;
+
+    return Math.min(rowCount, this.firstItemPosition + pageSize - 1);
+  }
+
+  <template>
+    <PixPagination
+      @pagination={{@pagination}}
+      @pageOptions={{@pageOptions}}
+      @isCondensed={{@isCondensed}}
+      @texts={{hash
+        title=(t "common.pagination.title")
+        pageSize=(t "common.pagination.pageSize")
+        pageElementCount=(t
+          "common.pagination.pageElementCount"
+          totalPage=@pagination.pageCount
+          total=@pagination.rowCount
+          start=this.firstItemPosition
+          end=this.lastItemPosition
+        )
+        pageNumber=(t "common.pagination.pageNumber" current=@pagination.page total=@pagination.pageCount)
+        previousPage=(t "common.pagination.previousPage")
+        nextPage=(t "common.pagination.nextPage")
+      }}
+    />
+  </template>
+}

mon-pix/app/templates/authenticated/user-trainings.gjs

@@ -1,8 +1,8 @@
-import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
 import t from 'ember-intl/helpers/t';
 import pageTitle from 'ember-page-title/helpers/page-title';
 import Card from 'mon-pix/components/training/card';
 import Header from 'mon-pix/components/training/header';
+import PaginationWrapper from 'mon-pix/components/ui/pagination-wrapper';
 <template>
   {{pageTitle (t "pages.user-trainings.title")}}
 
@@ -17,10 +17,9 @@ import Header from 'mon-pix/components/training/header';
             </li>
           {{/each}}
         </ul>
-        <PixPagination
+        <PaginationWrapper
           @pagination={{@model.trainings.meta.pagination}}
           @pageOptions={{@controller.pageOptions}}
-          @locale={{@controller.locale.currentLanguage}}
           @isCondensed="true"
         />
       </div>

mon-pix/app/templates/authenticated/user-tutorials/recommended.gjs

@@ -1,7 +1,7 @@
-import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
 import Cards from 'mon-pix/components/tutorials/cards';
 import Header from 'mon-pix/components/tutorials/header';
 import RecommendedEmpty from 'mon-pix/components/tutorials/recommended-empty';
+import PaginationWrapper from 'mon-pix/components/ui/pagination-wrapper';
 import Sidebar from 'mon-pix/components/user-tutorials/filters/sidebar';
 <template>
   <main id="main" class="user-tutorials global-page-container" role="main">
@@ -15,11 +15,10 @@ import Sidebar from 'mon-pix/components/user-tutorials/filters/sidebar';
     <div class="user-tutorials-content global-page-container__streched-content">
       {{#if @model.recommendedTutorials.meta.pagination.rowCount}}
         <Cards @tutorials={{@model.recommendedTutorials}} />
-        <PixPagination
+        <PaginationWrapper
           @pagination={{@model.recommendedTutorials.meta.pagination}}
           @pageOptions={{@controller.pageOptions}}
-          @locale={{@controller.locale.currentLanguage}}
-          @isCondensed="true"
+          @isCondensed={{true}}
         />
       {{else}}
         <RecommendedEmpty />

mon-pix/app/templates/authenticated/user-tutorials/saved.gjs

@@ -1,18 +1,17 @@
-import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
 import Cards from 'mon-pix/components/tutorials/cards';
 import Header from 'mon-pix/components/tutorials/header';
 import SavedEmpty from 'mon-pix/components/tutorials/saved-empty';
+import PaginationWrapper from 'mon-pix/components/ui/pagination-wrapper';
 <template>
   <main id="main" class="user-tutorials global-page-container" role="main">
     <Header @onTriggerFilterButton={{@controller.showSidebar}} @shouldShowFilterButton={{false}} />
     <div class="user-tutorials-content global-page-container__streched-content">
       {{#if @model.savedTutorials.meta.pagination.rowCount}}
         <Cards @tutorials={{@model.savedTutorials}} @afterRemove={{@controller.refresh}} />
-        <PixPagination
+        <PaginationWrapper
           @pagination={{@model.savedTutorials.meta.pagination}}
           @pageOptions={{@controller.pageOptions}}
-          @locale={{@controller.locale.currentLanguage}}
-          @isCondensed="true"
+          @isCondensed={{true}}
         />
       {{else}}
         <SavedEmpty />

mon-pix/package.json

@@ -43,7 +43,7 @@
     "@1024pix/ember-testing-library": "^3.0.44",
     "@1024pix/epreuves-components": "^4.18.2",
     "@1024pix/eslint-plugin": "^3.0.4",
-    "@1024pix/pix-ui": "^61.4.1",
+    "@1024pix/pix-ui": "github:1024pix/pix-ui#refactor/change-popperjs-by-floating-ui",
     "@1024pix/stylelint-config": "^5.1.37",
     "@babel/eslint-parser": "^7.28.6",
     "@babel/plugin-proposal-decorators": "^7.29.7",