refactor(oui-select): use ui-select in a proper way

package.json

@@ -39,7 +39,8 @@
     "clipboard": "^2.0.1",
     "escape-string-regexp": "^1.0.5",
     "flatpickr": "^4.5.2",
-    "popper.js": "^1.14.4"
+    "popper.js": "^1.14.4",
+    "ui-select": "^0.19.8"
   },
   "peerDependencies": {
     "angular": ">=1.6.x",

packages/oui-field/src/index.spec.js

@@ -483,7 +483,7 @@ describe("ouiField", () => {
         });
 
         describe("with oui-select", () => {
-            const getDropdownButton = element => element[0].querySelector(".oui-button_dropdown");
+            const getDropdownButton = element => element[0].querySelector(".ui-select-match");
             const getSelectController = element => element.find("oui-select").controller("ouiSelect");
 
             it("should give focus to oui-select after on label click", () => {
@@ -506,14 +506,14 @@ describe("ouiField", () => {
                     ]
                 });
 
+                $timeout.flush();
+
                 const selectController = getSelectController(element);
                 const $label = angular.element(getLabel(element));
-
-                $timeout.flush();
-                selectController.uiSelectDropdownTrigger.focus = jasmine.createSpy();
+                selectController.$select.focusser[0].focus = jasmine.createSpy();
 
                 $label.triggerHandler("click");
-                expect(selectController.uiSelectDropdownTrigger.focus).toHaveBeenCalled();
+                expect(selectController.$select.focusser[0].focus).toHaveBeenCalled();
             });
 
             it("should show errors when blur is triggered on select", () => {

packages/oui-file/src/index.spec.js

@@ -255,17 +255,6 @@ describe("ouiFile", () => {
                 controller.removeFile(mockFile);
                 expect(controller.model.length).toBe(0);
             });
-
-            it("should load a preview", (done) => {
-                const delay = 500;
-                controller.preview = true;
-                const file = controller.loadFilePreview(mockFile);
-                setTimeout(() => {
-                    expect(file.loading).toBeTruthy();
-                    expect(file.reader).toBeDefined();
-                    done();
-                }, delay);
-            });
         });
 
         describe("Form controls", () => {

packages/oui-select-picker/src/index.spec.js

@@ -102,10 +102,10 @@ describe("ouiSelectPicker", () => {
             it("should allow to pick one of values attribute", () => {
                 const element = TestUtils.compileTemplate('<oui-select-picker values="[\'aValue\', \'bValue\']"></oui-select-picker>');
 
-                const selectElement = element[0].querySelector("oui-select");
-                expect(angular.element(selectElement)).not.toBeUndefined();
+                const selectElement = angular.element(element[0].querySelector(".ui-select-match"));
+                selectElement.triggerHandler("click");
 
-                const selectValues = element[0].querySelectorAll(".oui-dropdown-option");
+                const selectValues = element[0].querySelectorAll(".ui-select-choices-row");
                 expect(angular.element(selectValues[0]).text().trim()).toEqual("aValue");
             });
 
@@ -119,7 +119,10 @@ describe("ouiSelectPicker", () => {
             it("should display select values according to match", () => {
                 const element = TestUtils.compileTemplate('<oui-select-picker values="[{id: \'a\', name: \'aValue\'}, {id: \'b\', name: \'bValue\'}]" match="name"></oui-select-picker>');
 
-                const selectValues = element[0].querySelectorAll(".oui-dropdown-option");
+                const selectElement = angular.element(element[0].querySelector(".ui-select-match"));
+                selectElement.triggerHandler("click");
+
+                const selectValues = element[0].querySelectorAll(".ui-select-choices-row");
                 expect(angular.element(selectValues[1]).text().trim()).toEqual("bValue");
             });
         });
@@ -239,28 +242,39 @@ describe("ouiSelectPicker", () => {
                     onChange: onChangeSpy
                 });
 
-                const selectPickerComponent1 = element.children()[0];
-                const selectPickerComponent2 = element.children()[1];
-                const $radioElement1 = angular.element(selectPickerComponent1).find("input");
-                const $radioElement2 = angular.element(selectPickerComponent2).find("input");
-                const $triggerElement1 = angular.element(selectPickerComponent1.querySelector("button.oui-dropdown__trigger"));
-                const $triggerElement2 = angular.element(selectPickerComponent2.querySelector("button.oui-dropdown__trigger"));
+                const selectPickers = element.find("oui-select-picker");
+
+                const selectPickerComponent1 = selectPickers[0];
+                const $radioElement1 = angular.element(selectPickerComponent1.querySelector(".oui-select-picker__input"));
+                const $triggerElement1 = angular.element(selectPickerComponent1.querySelector(".ui-select-match"));
+
+                const selectPickerComponent2 = selectPickers[1];
+                const $radioElement2 = angular.element(selectPickerComponent2.querySelector(".oui-select-picker__input"));
+                const $triggerElement2 = angular.element(selectPickerComponent2.querySelector(".ui-select-match"));
 
                 $radioElement1.prop("checked", true);
                 $triggerElement1.triggerHandler("click");
-                expect(angular.element(selectPickerComponent1.querySelector(".oui-ui-select-container")).hasClass("oui-ui-select-container_open")).toBe(true);
-                const $choiceElement1 = angular.element(selectPickerComponent1.querySelector(".ui-select-choices li button"));
+
+                const $choiceElement1 = angular.element(selectPickerComponent1.querySelector(".ui-select-choices-row"));
                 $choiceElement1.triggerHandler("click");
-                expect(angular.element(selectPickerComponent1.querySelector(".oui-ui-select-container")).hasClass("oui-ui-select-container_open")).toBe(false);
+
+                // Must open the dropdown before flushing the $timeout
+                $triggerElement1.triggerHandler("click");
                 $timeout.flush();
+
                 expect(onChangeSpy).toHaveBeenCalledWith("aValue");
 
                 $radioElement1.prop("checked", false);
                 $radioElement2.prop("checked", true);
                 $triggerElement2.triggerHandler("click");
-                const $choicesElement2 = angular.element(selectPickerComponent2.querySelector(".ui-select-choices li button"));
+
+                const $choicesElement2 = angular.element(selectPickerComponent2.querySelector(".ui-select-choices-row"));
                 $choicesElement2.triggerHandler("click");
+
+                // Must open the dropdown before flushing the $timeout
+                $triggerElement2.triggerHandler("click");
                 $timeout.flush();
+
                 expect(onChangeSpy).toHaveBeenCalledWith("cValue");
             });
         });

packages/oui-select/README.md

@@ -4,96 +4,121 @@
 
 ## Usage
 
+### Basic (String array)
+
+```html:preview
+<oui-select name="letter"
+    model="$ctrl.modelBasicString"
+    items="['a', 'b', 'c']">
+</oui-select>
+```
+
 ### Basic (Object array)
 
 ```html:preview
 <oui-select name="country"
-    model="$ctrl.country"
-    data-title="Select a country"
-    placeholder="Select a country..."
+    model="$ctrl.modelBasicObject"
     items="$ctrl.countries"
-    required
-    match="name"
-    data-align="start">
-    <span ng-bind="$item.name"></span>
+    match="name">
 </oui-select>
 ```
 
-### Basic (String array)
+### Placeholder
 
 ```html:preview
 <oui-select name="letter"
-    model="$ctrl.letter"
-    data-title="Select a letter"
+    model="$ctrl.modelPlaceholder"
     placeholder="Select a letter..."
-    items="['a', 'b', 'c']"
-    required
-    data-align="start">
-    <span ng-bind="$item"></span>
+    items="['a', 'b', 'c']">
 </oui-select>
 ```
 
-### Grouping / Custom template
+### Searchable
 
 ```html:preview
 <oui-select name="country"
-    model="$ctrl.country2"
-    data-title="Select a country"
+    model="$ctrl.modelSearchable"
     placeholder="Select a country..."
     items="$ctrl.countries"
-    required
-    group-by="$ctrl.groupByFirstLetter"
     match="name"
-    data-align="start">
-    <span ng-bind="$item.name" class="d-inline-block text-truncate"></span><br>
-    <small>
-        Code: <span ng-bind="$item.code"></span>
-    </small>
+    searchable>
 </oui-select>
 ```
 
 ### Disabled
 
 ```html:preview
 <oui-select name="country"
-    model="$ctrl.country"
-    data-title="Select a country"
+    model="$ctrl.modelDisabled"
     placeholder="Select a country..."
     items="$ctrl.countries"
     required
     match="name"
     data-align="start"
     disabled>
-    <span ng-bind="$item.name"></span>
 </oui-select>
 ```
 
 ### Disabled Items
 
+<oui-message type="info" dismissable="false">
+    For each <code class="oui-doc-codespan">$item</code> in <code class="oui-doc-codespan">items</code> array, <code class="oui-doc-codespan">disable-item</code> will be called with current <code class="oui-doc-codespan">$item</code> as an argument. <br />
+    If it returns true, <code class="oui-doc-codespan">$item</code> will be disabled. 
+</oui-message>
+
 ```html:preview
 <oui-select name="country"
-    model="$ctrl.country"
-    data-title="Select a country"
+    model="$ctrl.modelDisabledItems"
     placeholder="Select a country..."
     items="$ctrl.countries"
     disable-items="$ctrl.disableItems($item)"
-    required
-    match="name"
-    data-align="start">
-    <span ng-bind="$item.name"></span>
+    match="name">
 </oui-select>
 ```
 
-**Note**: For each `$item` in `items` array, `disable-item` will be called with current `$item` as an argument. If it returns true, `$item` will be disabled. 
+### Grouping
+
+```html:preview
+<oui-select name="country"
+    model="$ctrl.modelGrouping"
+    placeholder="Select a country..."
+    items="$ctrl.countries"
+    group-by="$ctrl.groupByFirstLetter"
+    match="name">
+</oui-select>
+```
+
+### Custom option template
+
+<oui-message type="info" dismissable="false">
+    Template inside <code class="oui-doc-codespan">oui-select</code> component will be used as the content of each option. <br />
+    You can use <code class="oui-doc-codespan">$item</code> variable to get option value for your template.
+</oui-message>
+
+```html:preview
+<oui-select name="country"
+    model="$ctrl.modelCustomTemplate"
+    placeholder="Select a country..."
+    items="$ctrl.countries"
+    group-by="$ctrl.groupByFirstLetter"
+    match="name">
+    <span ng-bind="$item.name" class="d-inline-block text-truncate"></span><br>
+    <small>
+        Code: <span ng-bind="$item.code"></span>
+    </small>
+</oui-select>
+```
 
 ### On Change
 
-**Note**: Model will not be refreshed until the `on-change` callback hasn't returned. If you want to access the new model inside the `on-change` callback you need to use the `modelValue` variable as below.
+<oui-message type="warning">
+    Model will not be refreshed until the <code class="oui-doc-codespan">on-change</code> callback hasn't returned. <br />
+    If you want to access the new model inside the <code class="oui-doc-codespan">on-change</code> callback you need to use the <code class="oui-doc-codespan">modelValue</code> variable as below.
+</oui-message>
 
 ```html:preview
 <oui-select name="country"
-    model="$ctrl.country3"
-    data-title="Select a country"
+    model="$ctrl.modelOnChange"
     placeholder="Select a country..."
     items="$ctrl.countries"
     required
@@ -102,9 +127,8 @@
     data-align="start"
     on-change="$ctrl.onChange(modelValue)"
     on-blur="$ctrl.onBlur()"
-    on-focus="$ctrl.onFocus()"
-    >
-    <span ng-bind="$item.name" class="d-inline-block text-truncate"></span><br>
+    on-focus="$ctrl.onFocus()">
+    <span ng-bind="$item.name"></span><br>
     <small>
         Code: <span ng-bind="$item.code"></span>
     </small>
@@ -123,8 +147,7 @@
 | ----          | ----      | ----      | ----              | ----              | ----      | ----
 | `model`       | object    | =         | no                | n/a               | n/a       | model bound to component
 | `name`        | string    | @?        | yes               | n/a               | n/a       | name of the form component
-| `data-align`  | string    | @?        | yes               | `start`, `end`    | `start`   | dropdown alignment
-| `data-title`  | string    | @?        | yes               | n/a               | n/a       | title attribute of the component
+| `title`       | string    | @?        | yes               | n/a               | n/a       | title attribute of the component
 | `placeholder` | string    | @?        | yes               | n/a               | n/a       | placeholder displayed when model is undefined
 | `match`       | string    | @?        | no                | n/a               | n/a       | property of item to show as selected item
 | `items`       | array     | <         | no                | n/a               | n/a       | array used to populate the list
@@ -136,3 +159,6 @@
 | `on-focus`    | function  | &         | no                | n/a               | n/a       | called on focus
 | `on-change`   | function  | &         | no                | n/a               | n/a       | handler triggered when value has changed
 
+#### Deprecated
+
+* `data-align`: Unused

packages/oui-select/src/index.js

@@ -1,11 +1,21 @@
-import "./ui-select";
+import "ui-select";
 import Select from "./select.directive";
 
 export default angular
     .module("oui.select", [
         "oui.field",
-        "oui.ui-select",
+        "ui.select",
         "ngSanitize"
     ])
+    .run(["$templateCache", ($templateCache) => {
+        $templateCache.put("oui-ui-select/choices.tpl.html", require("./templates/choices.html"));
+        $templateCache.put("oui-ui-select/footer.tpl.html", require("./templates/footer.html"));
+        $templateCache.put("oui-ui-select/header.tpl.html", require("./templates/header.html"));
+        $templateCache.put("oui-ui-select/match.tpl.html", require("./templates/match.html"));
+        $templateCache.put("oui-ui-select/match-multiple.tpl.html", require("./templates/match-multiple.html"));
+        $templateCache.put("oui-ui-select/no-choice.tpl.html", require("./templates/no-choice.html"));
+        $templateCache.put("oui-ui-select/select.tpl.html", require("./templates/select.html"));
+        $templateCache.put("oui-ui-select/select-multiple.tpl.html", require("./templates/select-multiple.html"));
+    }])
     .directive("ouiSelect", Select)
     .name;