upfluence · JulienVannier66 · Apr 23, 2026 · Apr 23, 2026 · Apr 23, 2026 · Apr 23, 2026
diff --git a/addon/components/o-s-s/country-selector.hbs b/addon/components/o-s-s/country-selector.hbs
@@ -30,23 +30,18 @@
         @onSelect={{this.onItemSelected}}
         @searchPlaceholder={{t "oss-components.country-selector.search"}}
         @onClose={{this.closeDropdown}}
-        @enableKeyboard={{true}}
         id={{this.portalId}}
         class={{concat "margin-top-px-0 country-selector-container__dropdown " this.dropdownAddressableClass}}
         {{on-click-outside this.onClickOutside}}
         {{on "click" this.noop}}
       >
         <:option as |item|>
-          <div class="fx-row fx-xalign-center {{if (eq this.selectedCountry item) 'row-selected'}}">
-            {{#if item.id}}
-              <div class="fflag fflag-{{item.id}} ff-sm ff-rounded"></div>
-            {{/if}}
-            <span class="text-color-default-light margin-left-xx-sm">{{item.name}}</span>
-            {{#if (eq this.selectedCountry item)}}
-              <div class="fx-1"></div>
-              <OSS::Icon @icon="fa-check" class="font-color-primary-500 padding-right-px-6" />
-            {{/if}}
-          </div>
+          <OSS::InfiniteSelect::Option
+            @title={{item.name}}
+            @prefixCountry={{item.id}}
+            @selected={{eq this.selectedCountry item}}
+            @onSelect={{fn this.onItemSelected item}}
+          />
         </:option>
       </OSS::InfiniteSelect>
     {{/in-element}}

diff --git a/addon/components/o-s-s/country-selector.ts b/addon/components/o-s-s/country-selector.ts
@@ -47,7 +47,7 @@ export default class OSSCountrySelector extends BaseDropdown<OSSCountrySelectorA
     );
 
     if (!isEmpty(this.args.value)) {
-      scheduleOnce('afterRender', this, this._matchValueWithSourceList);
+      scheduleOnce('afterRender', this, this.matchValueWithSourceList);
     }
   }
 
@@ -134,7 +134,7 @@ export default class OSSCountrySelector extends BaseDropdown<OSSCountrySelectorA
     this.args.onChange(value);
   }
 
-  private _matchValueWithSourceList(): void {
+  private matchValueWithSourceList(): void {
     if (this.selectedCountry) this.onItemSelected(this.selectedCountry, true);
   }
 }
diff --git a/addon/components/o-s-s/currency-input.hbs b/addon/components/o-s-s/currency-input.hbs
@@ -59,7 +59,6 @@
       @onSearch={{this.onSearch}}
       @onSelect={{this.onSelect}}
       @searchPlaceholder={{t "oss-components.currency-input.search"}}
-      @enableKeyboard={{true}}
       {{on-click-outside this.hideCurrencySelector}}
     >
       <:option as |currency|>

diff --git a/addon/components/o-s-s/infinite-select.hbs b/addon/components/o-s-s/infinite-select.hbs
@@ -91,7 +91,7 @@
       @skin={{@action.skin}}
       @icon={{@action.icon}}
       {{on "click" @action.onClick}}
-      class="width-pc-100"
+      class="fx-1 margin-left-px-6 margin-right-px-6"
       data-control-name="infinite-select-footer-action-button"
     />
   {{/if}}

diff --git a/addon/components/o-s-s/infinite-select.stories.js b/addon/components/o-s-s/infinite-select.stories.js
@@ -109,7 +109,7 @@ export default {
         type: {
           summary: 'boolean'
         },
-        defaultValue: { summary: false }
+        defaultValue: { summary: true }
       },
       control: {
         type: 'boolean'
@@ -182,7 +182,7 @@ const defaultArgs = {
   loading: false,
   loadingMore: false,
   inline: false,
-  enableKeyboard: false,
+  enableKeyboard: true,
   skin: 'default',
   action: {
     skin: 'tertiary',
@@ -202,7 +202,7 @@ const Template = (args) => ({
       <OSS::InfiniteSelect
         @items={{this.items}} @itemLabel={{this.itemLabel}} @searchEnabled={{this.searchEnabled}} @onSearch={{this.onSearch}}
         @searchPlaceholder={{this.searchPlaceholder}} @onSelect={{this.onSelect}} @loading={{this.loading}}
-        @loadingMore={{this.loadingMore}} @inline={{this.inline}} @onBottomReached={{this.onBottomReached}} 
+        @loadingMore={{this.loadingMore}} @inline={{this.inline}} @onBottomReached={{this.onBottomReached}}
         @skin={{this.skin}} @didRender={{this.didRender}} @enableKeyboard={{this.enableKeyboard}} @action={{this.action}}
         class="upf-align--absolute-center"/>
   `,
@@ -214,7 +214,7 @@ const OptionBlockTemplate = (args) => ({
     <OSS::InfiniteSelect
       @items={{this.items}} @itemLabel={{this.itemLabel}} @searchEnabled={{this.searchEnabled}} @onSearch={{this.onSearch}}
         @searchPlaceholder={{this.searchPlaceholder}} @onSelect={{this.onSelect}} @loading={{this.loading}}
-        @loadingMore={{this.loadingMore}} @inline={{this.inline}} @onBottomReached={{this.onBottomReached}} 
+        @loadingMore={{this.loadingMore}} @inline={{this.inline}} @onBottomReached={{this.onBottomReached}}
         @didRender={{this.didRender}} @enableKeyboard={{this.enableKeyboard}} class="upf-align--absolute-center">
       <:option as |opt|>
         {{opt.superhero}} (Alias: {{opt.characters}})

diff --git a/addon/components/o-s-s/infinite-select.ts b/addon/components/o-s-s/infinite-select.ts
@@ -86,7 +86,7 @@ export default class OSSInfiniteSelect extends Component<InfiniteSelectArgs> {
   }
 
   get enableKeyboard(): boolean {
-    return this.args.enableKeyboard ?? false;
+    return this.args.enableKeyboard ?? true;
   }
 
   get searchEnabled(): boolean {

diff --git a/addon/components/o-s-s/infinite-select/option.ts b/addon/components/o-s-s/infinite-select/option.ts
@@ -89,7 +89,9 @@ export default class OSSInfiniteSelectOptionComponent extends Component<OSSInfin
   }
 
   @action
-  onSelect(value: boolean): void {
+  onSelect(value: boolean, event?: PointerEvent): void {
+    event?.stopPropagation();
+
     if (this.args.disabled) return;
     this.args.onSelect(value);
   }

diff --git a/addon/components/o-s-s/phone-number-input.hbs b/addon/components/o-s-s/phone-number-input.hbs
@@ -43,24 +43,19 @@
         @onSearch={{this.onSearch}}
         @onSelect={{this.onSelect}}
         @searchPlaceholder="Search"
-        @enableKeyboard={{true}}
         id={{this.portalId}}
         class={{concat "margin-top-px-0 phone-number-container__dropdown " this.dropdownAddressableClass}}
         {{on-click-outside this.onClickOutside}}
         {{on "click" this.noop}}
       >
         <:option as |country|>
-          <div class="fx-row fx-xalign-center {{if (eq this.selectedCountry country) 'row-selected'}}">
-            <div class="fflag fflag-{{country.id}} ff-sm ff-rounded"></div>
-            <span class="text-color-default-light margin-left-xx-sm">{{country.name}}</span>
-            <span class="text-color-default-light margin-left-xxx-sm fx-1">(+{{get
-                country.countryCallingCodes
-                0
-              }})</span>
-            {{#if (eq this.selectedCountry country)}}
-              <OSS::Icon @icon="fa-check" class="font-color-primary-500" />
-            {{/if}}
-          </div>
+          <OSS::InfiniteSelect::Option
+            @title={{country.name}}
+            @prefixCountry={{country.id}}
+            @subtitle={{concat "(+" (get country.countryCallingCodes 0) ")"}}
+            @selected={{eq this.selectedCountry country}}
+            @onSelect={{fn this.onSelect country}}
+          />
         </:option>
       </OSS::InfiniteSelect>
     {{/in-element}}

diff --git a/addon/components/o-s-s/power-select.hbs b/addon/components/o-s-s/power-select.hbs
@@ -41,7 +41,6 @@
           @loading={{@loading}}
           @loadingMore={{@loadingMore}}
           @onBottomReached={{@onBottomReached}}
-          @enableKeyboard={{true}}
           class={{concat "margin-top-px-0 upf-power-select__dropdown " this.dropdownAddressableClass}}
           id={{this.portalId}}
           {{on "click" this.noop}}
@@ -65,7 +64,6 @@
           @loading={{@loading}}
           @loadingMore={{@loadingMore}}
           @onBottomReached={{@onBottomReached}}
-          @enableKeyboard={{true}}
           class={{concat "margin-top-px-0 upf-power-select__dropdown " this.dropdownAddressableClass}}
           id={{this.portalId}}
           {{on "click" this.noop}}

diff --git a/addon/components/o-s-s/select.hbs b/addon/components/o-s-s/select.hbs
@@ -34,7 +34,6 @@
           @onSelect={{this.onSelect}}
           @searchEnabled={{this.searchEnabled}}
           @searchPlaceholder={{this.searchPlaceholder}}
-          @enableKeyboard={{true}}
           @action={{this.actionArguments}}
           id={{this.portalId}}
           class={{concat "margin-top-px-0 oss-select-container__dropdown " this.dropdownAddressableClass}}
@@ -65,7 +64,6 @@
           @onSelect={{this.onSelect}}
           @searchEnabled={{this.searchEnabled}}
           @searchPlaceholder={{this.searchPlaceholder}}
-          @enableKeyboard={{true}}
           @action={{this.actionArguments}}
           id={{this.portalId}}
           class={{concat "margin-top-px-0 oss-select-container__dropdown " this.dropdownAddressableClass}}

diff --git a/addon/components/o-s-s/smart/immersive/currency-input.hbs b/addon/components/o-s-s/smart/immersive/currency-input.hbs
@@ -58,13 +58,17 @@
         {{on-click-outside this.hideCurrencySelector}}
       >
         <:option as |currency|>
-          <div class="fx-row fx-xalign-center {{if (eq this.selectedCurrency currency) 'row-selected'}}">
-            <span class="symbol text-color-default-light margin-left-xx-sm">{{currency.symbol}}</span>
-            <span class="text-color-default-light margin-left-xx-sm fx-1">{{currency.code}}</span>
-            {{#if (eq this.selectedCurrency currency)}}
-              <OSS::Icon @icon="fa-check" class="font-color-primary-500 padding-right-px-6" />
-            {{/if}}
-          </div>
+          <OSS::InfiniteSelect::Option
+            @title={{currency.code}}
+            @selected={{eq this.selectedCurrency currency}}
+            @onSelect={{fn this.onSelect currency}}
+          >
+            <:prefix>
+              <span class={{if (eq this.selectedCurrency currency) "font-color-primary-500"}}>
+                {{currency.symbol}}
+              </span>
+            </:prefix>
+          </OSS::InfiniteSelect::Option>
         </:option>
       </OSS::InfiniteSelect>
     {{/in-element}}

diff --git a/addon/components/o-s-s/smart/immersive/currency-input.ts b/addon/components/o-s-s/smart/immersive/currency-input.ts
@@ -72,7 +72,9 @@ export default class OSSSmartImmersiveCurrencyInput extends OSSCurrencyInput<OSS
   }
 
   get dropdownAddressableClass(): string {
-    return this.args.addressableAs ? `${this.args.addressableAs}__dropdown` : '';
+    return this.args.addressableAs
+      ? `smart-immersive-currency-input-container__dropdown ${this.args.addressableAs}__dropdown`
+      : 'smart-immersive-currency-input-container__dropdown';
   }
 
   cleanupDrodpownAutoplacement?: () => void;

diff --git a/addon/components/o-s-s/smart/immersive/select.hbs b/addon/components/o-s-s/smart/immersive/select.hbs
@@ -41,7 +41,6 @@
         @loading={{@loading}}
         @loadingMore={{@loadingMore}}
         @onBottomReached={{@onBottomReached}}
-        @enableKeyboard={{true}}
         @searchEnabled={{@searchEnabled}}
         class={{concat "margin-top-px-0 upf-power-select__dropdown " this.dropdownAddressableClass}}
         id={{this.portalId}}

diff --git a/app/styles/atoms/smart/immersive-currency-input.less b/app/styles/atoms/smart/immersive-currency-input.less
@@ -22,7 +22,6 @@
     background-color: var(--color-white);
 
     &:not(.disabled, :disabled) {
-
       &:hover,
       &:focus-within {
         border: 1px dashed var(--color-gray-500);
@@ -81,15 +80,17 @@
 
       .rainbow-text-animated {
         .font-weight-semibold;
-        background: linear-gradient(130deg,
-            var(--color-gray-400) 18%,
-            var(--color-gray-300) 25%,
-            rgba(250, 198, 255, 1) 56%,
-            var(--color-primary-100) 62%,
-            var(--color-white) 66%,
-            rgba(250, 198, 255, 0.58) 68%,
-            var(--color-gray-300) 73%,
-            var(--color-gray-400) 85%);
+        background: linear-gradient(
+          130deg,
+          var(--color-gray-400) 18%,
+          var(--color-gray-300) 25%,
+          rgba(250, 198, 255, 1) 56%,
+          var(--color-primary-100) 62%,
+          var(--color-white) 66%,
+          rgba(250, 198, 255, 0.58) 68%,
+          var(--color-gray-300) 73%,
+          var(--color-gray-400) 85%
+        );
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
@@ -100,6 +101,17 @@
     }
   }
 
+  &__dropdown {
+    .upf-infinite-select__item {
+      padding: 0;
+
+      &:hover,
+      &:focus {
+        background-color: transparent;
+      }
+    }
+  }
+
   &--filled {
     .smart-immersive-currency-input {
       border-color: var(--color-primary-400);
@@ -115,7 +127,6 @@
       }
 
       &:not(.disabled, :disabled) {
-
         &:focus-within,
         &:active {
           border-color: var(--color-primary-400);
@@ -138,7 +149,6 @@
       .border-color-error;
 
       &:not(.disabled, :disabled) {
-
         &:focus-within,
         &:hover {
           .border-color-error;
@@ -156,4 +166,4 @@
   100% {
     background-position: 0 0%;
   }
-}
+}
diff --git a/app/styles/base/_floating-menu.less b/app/styles/base/_floating-menu.less
@@ -18,17 +18,18 @@
 }
 
 .upf-floating-menu {
-  background-color: #ffffff;
-  border-radius: var(--border-radius-sm);
-  box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.2);
+  background-color: var(--color-white);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--box-shadow-md);
 
   display: flex;
   flex-direction: column;
 
   overflow: hidden auto;
   max-height: var(--floating-max-height, 250px);
   max-width: 350px;
-  padding: var(--spacing-px-6);
+  padding: var(--spacing-px-9) var(--spacing-px-6);
   margin-top: var(--spacing-px-12);
   position: absolute;
   z-index: 1100;

diff --git a/app/styles/base/_infinite-select.less b/app/styles/base/_infinite-select.less
@@ -3,6 +3,10 @@
   width: 100%;
   overscroll-behavior: contain;
 
+  .upf-infinite-select--search {
+    margin: var(--spacing-px-3) var(--spacing-px-6) 0 var(--spacing-px-6);
+  }
+
   ul {
     padding: 0;
   }
@@ -26,6 +30,7 @@
 
 .upf-infinite-select__container {
   position: relative;
+  overflow: auto;
 }
 
 .upf-infinite-select__items-container {
@@ -66,7 +71,7 @@
   padding: var(--spacing-px-6);
   gap: var(--spacing-px-6);
 
-  &.upf-power-select__dropdown  {
+  &.upf-power-select__dropdown {
     overflow: auto;
   }
 

diff --git a/app/styles/country-selector.less b/app/styles/country-selector.less
@@ -22,28 +22,15 @@
     }
   }
 
-  .row-selected span {
-    .text-color-default;
-  }
-
-  .upf-infinite-select {
-    max-width: 100%;
-
-    padding: var(--spacing-px-12);
-    margin-top: var(--spacing-px-6);
+  &__dropdown {
     .upf-infinite-select__item {
-      &:focus {
-        background-color: var(--color-gray-100);
-      }
+      padding: 0;
 
-      &:focus-visible {
-        outline: none;
+      &:hover,
+      &:focus {
+        background-color: transparent;
       }
     }
-
-    .row-selected span {
-      color: var(--color-gray-900);
-    }
   }
 
   &--success {