feat: Add search functionality to Select component

source/php/Component/Select/Select.php

@@ -4,6 +4,8 @@
 
 class Select extends \ComponentLibrary\Component\BaseController
 {
+    public const AUTO_ENABLE_SEARCH_THRESHOLD = 7;
+
     public function init()
     {
         //Extract array for eazy access (fetch only)
@@ -106,6 +108,19 @@ public function init()
             }
             return $boolean ? false : '';
         };
+
+        $this->data = $this->mapSearch($this->data);
+    }
+
+    private function mapSearch(array $data): array {
+
+        if(!isset($data['search']) || is_null($data['search'])) {
+            if(count($data['options']) > static::AUTO_ENABLE_SEARCH_THRESHOLD) {
+                $data['search'] = true; 
+            }
+        }
+
+        return $data;
     }
 
     private function getIconSize($fieldSize = 'md'): string

source/php/Component/Select/SelectTest.php

@@ -0,0 +1,68 @@
+<?php
+
+namespace ComponentLibrary\Component\Select;
+
+use ComponentLibrary\Cache\CacheInterface;
+use ComponentLibrary\Helper\TagSanitizerInterface;
+use PHPUnit\Framework\TestCase;
+
+class SelectTest extends TestCase {
+    /**
+     * @testdox can be instantiated
+     */
+    public function testCanBeInstantiated(): void {
+        $select = new Select(
+            static::getData(), 
+            static::createCache(), 
+            static::createTagSanitizer()
+        );
+
+        $this->assertInstanceOf(Select::class, $select);
+    }
+
+    /**
+     * @testdox auto enables search when options exceed threshold
+     */
+    public function testAutoEnablesSearchWhenOptionsExceedThreshold(): void {
+        $createOption = fn(int $i) => [ 'value' => "option_{$i}", 'label' => "Option {$i}" ];
+        $options = array_map($createOption, range(0, Select::AUTO_ENABLE_SEARCH_THRESHOLD));
+
+        $select = new Select(
+            static::getData(['options' => $options]), 
+            static::createCache(), 
+            static::createTagSanitizer()
+        );
+
+        $this->assertTrue($select->getData()['search']);
+    }
+
+    static function getData(array $merge = []): array {
+        return array_merge([
+            'size' => 'md',
+            'options' => [],
+            'preselected' => false
+        ], $merge);
+    }
+
+    private static function createCache():CacheInterface {
+        return new class implements CacheInterface {
+            public function get(string $key, ?string $group = null): mixed
+            {
+                return null;
+            }
+            public function set(string $key, mixed $data, ?string $group = null): void
+            {
+            }
+        };
+    }
+
+    private static function createTagSanitizer() {
+        return new class implements TagSanitizerInterface{
+            public function removeATags(string $string): string
+            {
+                return $string;
+            }
+        };
+    }
+}
+

source/php/Component/Select/partials/action.blade.php

@@ -1,5 +1,5 @@
 <div class="c-field__inner">
-<div class="{{ $baseClass }}__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="{{$id}}-open-dropdown" data-js-placeholder="{{ $placeholder && $isMultiSelect ? $placeholder : '' }}">
-    {{ $placeholder && $isMultiSelect ? $placeholder : '' }}
-</div>
+    <div class="{{ $baseClass }}__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="{{$id}}-open-dropdown" data-js-placeholder="{{ $placeholder && $isMultiSelect ? $placeholder : '' }}">
+        {{ $placeholder && $isMultiSelect ? $placeholder : '' }}
+    </div>
 </div>

source/php/Component/Select/partials/dropdown.blade.php

@@ -5,4 +5,5 @@
         @include('Select.partials.dropdown_item')
       @endforeach
   </ul>
+  @includeWhen($search, 'Select.partials.searchNoResults')
 </div>

source/php/Component/Select/partials/search.blade.php

@@ -0,0 +1,8 @@
+@field([ 
+    'type' => 'search',
+    'icon' => ['icon' => 'search'],
+    'placeholder' => "Search",
+    'classList' => [ $baseClass . '__search-field' ],
+    'attributeList' => [ 'data-js-select-search-input' => true ],
+    'size' => 'sm',
+]) @endfield

source/php/Component/Select/partials/searchNoResults.blade.php

@@ -0,0 +1,7 @@
+@typography([ 
+    'element' => 'div', 
+    'classList' => [ $baseClass . '__search-no-results' ],
+    'attributeList' => ['aria-hidden' => 'true']
+])
+    {{ $searchNoResultsText }}
+@endtypography

source/php/Component/Select/select.blade.php

@@ -53,6 +53,7 @@
         @includeWhen($clearButtonEnabled, 'Select.partials.clear')
         @include('Select.partials.action')
     </div>
+    @includeWhen($search, 'Select.partials.search')
     @include('Select.partials.dropdown')
     @include('Select.partials.error')
 

source/php/Component/Select/select.json

@@ -16,7 +16,9 @@
         "size": "md",
         "maxSelections": false,
         "hidePlaceholder": false,
-        "selectAttributeList": []
+        "selectAttributeList": [],
+        "search": null,
+        "searchNoResultsText": "No results found"
     },
     "description": {
         "label": "The placeholder of the dropdown",
@@ -33,7 +35,9 @@
         "size": "The size of the select component (sm, md, lg)",
         "maxSelections": "The maximum number of selections allowed. Will only be applied if \"multiple\" is true.",
         "hidePlaceholder": "Hides the placeholder but keeps the label",
-        "selectAttributeList": "Ann array with attributes that will be set on the actual select element."
+        "selectAttributeList": "Ann array with attributes that will be set on the actual select element.",
+        "search": "Enables a search input within the select dropdown.",
+        "searchNoResultsText": "The text to show when no results are found in the search."
     },
     "view": "select.blade.php",
     "dependency": {