feat(pix-ui): mutualized pix select list

1024pix · Nov 15, 2024 · 53c209f · 53c209f
1 parent 2de6073
commit 53c209f
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 86 deletions.
diff --git a/addon/components/pix-select-list.hbs b/addon/components/pix-select-list.hbs
@@ -0,0 +1,83 @@
+<ul role="listbox" id={{@listId}} class="pix-select__options">
+  <li
+    class="pix-select-options-category__option{{unless
+        @value
+        ' pix-select-options-category__option--selected'
+      }}{{unless @displayDefaultOption ' pix-select-options-category__option--hidden'}}"
+    role="option"
+    tabindex={{if @isDefaultOptionHidden "-1" "0"}}
+    aria-selected={{if @value "false" "true"}}
+    {{on "click" (fn @onChange @defaultOption)}}
+    {{on-enter-action (fn @onChange @defaultOption)}}
+    {{on-space-action (fn @onChange @defaultOption)}}
+  >
+    {{@placeholder}}
+  </li>
+  {{#if @results}}
+    {{#if @displayCategory}}
+      {{#each @results as |element index|}}
+        <ul
+          class="pix-select-options__category"
+          role="group"
+          aria-labelledby={{if @displayCategory (concat "cat-" @selectId "-" index)}}
+        >
+          {{#if @displayCategory}}
+            <li
+              class="pix-select-options-category__name"
+              role="presentation"
+              id={{concat "cat-" @selectId "-" index}}
+            >
+              {{element.category}}
+            </li>
+          {{/if}}
+
+          {{#each element.options as |option|}}
+            {{! template-lint-disable require-context-role }}
+            {{!https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-grouped.html}}
+            <li
+              class="pix-select-options-category__option{{if
+                  (eq option.value @value)
+                  ' pix-select-options-category__option--selected'
+                }}"
+              role="option"
+              tabindex={{if @isExpanded "0" "-1"}}
+              aria-selected={{if (eq option.value @value) "true" "false"}}
+              {{on "click" (fn @onChange option)}}
+              {{on-enter-action (fn @onChange option)}}
+              {{on-space-action (fn @onChange option)}}
+            >
+              {{option.label}}
+
+              {{#if (eq option.value @value)}}
+                <PixIcon @name="check" role="presentation" />
+              {{/if}}
+            </li>
+          {{/each}}
+        </ul>
+      {{/each}}
+    {{else}}
+      {{#each @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 @isExpanded "0" "-1"}}
+          aria-selected={{if (eq option.value @value) "true" "false"}}
+          {{on "click" (fn @onChange option)}}
+          {{on-enter-action (fn @onChange option)}}
+          {{on-space-action (fn @onChange @defaultOption)}}
+        >
+          {{option.label}}
+
+          {{#if (eq option.value @value)}}
+            <PixIcon @name="check" role="presentation" />
+          {{/if}}
+        </li>
+      {{/each}}
+    {{/if}}
+  {{else}}
+    <li class="pix-select__empty-search-message">{{@emptySearchMessage}}</li>
+  {{/if}}
+</ul>
diff --git a/addon/components/pix-select.hbs b/addon/components/pix-select.hbs
@@ -68,92 +68,18 @@
             />
           </div>
         {{/if}}
-        <ul role="listbox" id={{this.listId}} class="pix-select__options">
-          <li
-            class="pix-select-options-category__option{{unless
-                @value
-                ' pix-select-options-category__option--selected'
-              }}{{unless this.displayDefaultOption ' pix-select-options-category__option--hidden'}}"
-            role="option"
-            tabindex={{if this.isDefaultOptionHidden "-1" "0"}}
-            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 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}}
-                    <li
-                      class="pix-select-options-category__name"
-                      role="presentation"
-                      id={{concat "cat-" this.selectId "-" index}}
-                    >
-                      {{element.category}}
-                    </li>
-                  {{/if}}
-
-                  {{#each element.options as |option|}}
-                    {{! template-lint-disable require-context-role }}
-                    {{!https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-grouped.html}}
-                    <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}}
-
-                      {{#if (eq option.value @value)}}
-                        <PixIcon @name="check" role="presentation" />
-                      {{/if}}
-                    </li>
-                  {{/each}}
-                </ul>
-              {{/each}}
-            {{else}}
-              {{#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}}
-
-                  {{#if (eq option.value @value)}}
-                    <PixIcon @name="check" role="presentation" />
-                  {{/if}}
-                </li>
-              {{/each}}
-            {{/if}}
-          {{else}}
-            <li class="pix-select__empty-search-message">{{@emptySearchMessage}}</li>
-          {{/if}}
-        </ul>
+        <PixSelectList
+          @listId={{this.listId}}
+          @value={{@value}}
+          @displayDefaultOption={{this.displayDefaultOption}}
+          @isDefaultOptionHidden={{this.isDefaultOptionHidden}}
+          @results={{this.results}}
+          @onChange={{this.onChange}}
+          @defaultOption={{this.defaultOption}}
+          @displayCategory={{this.displayCategory}}
+          @selectId={{this.selectId}}
+          @isExpanded={{this.isExpanded}}
+        />
       </div>
     </PopperJS>
     {{#if @errorMessage}}

diff --git a/app/components/pix-select-list.js b/app/components/pix-select-list.js
@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-select-list';