@financial-times/o-autocomplete 1.10.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +53 -41
  2. package/MIGRATION.md +18 -0
  3. package/README.md +130 -111
  4. package/main.scss +51 -41
  5. package/package.json +45 -51
  6. package/src/js/autocomplete.js +22 -7
  7. package/src/scss/_brand.scss +2 -2
  8. package/src/scss/_variables.scss +1 -1
package/CHANGELOG.md CHANGED
@@ -1,137 +1,149 @@
1
1
  # Changelog
2
2
 
3
- ## [1.10.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.9.2...o-autocomplete-v1.10.0) (2024-04-19)
3
+ ## [2.1.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v2.0.0...o-autocomplete-v2.1.0) (2025-11-13)
4
4
 
5
5
 
6
6
  ### Features
7
7
 
8
- * Enable highlighting of custom suggestions ([#1516](https://github.com/Financial-Times/origami/issues/1516)) ([c326099](https://github.com/Financial-Times/origami/commit/c3260998c4a8926f875e7ba95134b230ca517669))
8
+ * Add o-autocomplete configurable highlighting ([b0b7d01](https://github.com/Financial-Times/origami/commit/b0b7d015ec9c2fe07c18ab57bddafb49468bc3c1))
9
9
 
10
- ## [1.9.2](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.9.1...o-autocomplete-v1.9.2) (2024-04-12)
10
+ ## [2.0.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.10.0...o-autocomplete-v2.0.0) (2025-02-20)
11
+
12
+ ### ⚠ BREAKING CHANGES
13
+
14
+ This introduces a new design language and visually breaking changes. Including mobile optimised typography, icons, and buttons (see [MIGRATION.md](./MIGRATION.md)).
15
+
16
+ #### Origami 3: Principles, Purpose, and Impact
17
+
18
+ For anyone in P&T. We covered what’s new in Origami 3 (o3), why it matters, and what’s next.
19
+
20
+ [Slides](https://docs.google.com/presentation/d/1Qs8RHpMrDxxP5LyrVlnsUHnS3AriRK5-IboUeneRyMs/edit#slide=id.g764506c38c_0_357) | [Recording](https://drive.google.com/file/d/1OMW9zdTOEUvWyW1trsFqL3XhpTejYelO/view)
21
+
22
+ #### Origami 3: Bridging design & code
23
+
24
+ For designers and engineers alike. How to work with design guidelines, design foundations, and techniques for designer–engineer collaboration.
25
+
26
+ [Slides](https://docs.google.com/presentation/d/1pGBKFNv-g8RbY2g3SJ7v823XBI-MQqpjHrdgg9B6bzI/edit#slide=id.g764506c38c_0_357) | [Recording](https://drive.google.com/file/d/14hWVKM690arNEWROPHx9gmebnOUa6wlM/view)
27
+
28
+ #### Origami 3: Engineers’ Deep Dive
29
+
30
+ We got into the technical detail. Working with Origami CSS (no more Sass), custom elements, JSX templates, etc.
31
+
32
+ [Slides](https://docs.google.com/presentation/d/1s1S959CwZYnd0Q89EhsDFLFUuy2HZ9UnpBVaDHDFX7A/edit#slide=id.g3347c4befb5_0_402) | [Recording](https://drive.google.com/file/d/1hDtSN8Ce_P0Vr_dv0KXuXhs5Q9aHfvAp/view)
33
+
34
+ ## [1.10.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.9.2...o-autocomplete-v1.10.0) (2024-04-19)
35
+
36
+ ### Features
37
+
38
+ - Enable highlighting of custom suggestions ([#1516](https://github.com/Financial-Times/origami/issues/1516)) ([c326099](https://github.com/Financial-Times/origami/commit/c3260998c4a8926f875e7ba95134b230ca517669))
11
39
 
40
+ ## [1.9.2](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.9.1...o-autocomplete-v1.9.2) (2024-04-12)
12
41
 
13
42
  ### Bug Fixes
14
43
 
15
- * Update financial-times/accessible-autocomplete ([#1524](https://github.com/Financial-Times/origami/issues/1524)) ([8bcd024](https://github.com/Financial-Times/origami/commit/8bcd02402f3fa50e35756d3eb2a22b10435d634b))
44
+ - Update financial-times/accessible-autocomplete ([#1524](https://github.com/Financial-Times/origami/issues/1524)) ([8bcd024](https://github.com/Financial-Times/origami/commit/8bcd02402f3fa50e35756d3eb2a22b10435d634b))
16
45
 
17
46
  ## [1.9.1](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.9.0...o-autocomplete-v1.9.1) (2023-10-27)
18
47
 
19
-
20
48
  ### Bug Fixes
21
49
 
22
- * Update node and npm ([c371fc3](https://github.com/Financial-Times/origami/commit/c371fc3f7f2d66266dbca95862ecef3ddeb1f339))
50
+ - Update node and npm ([c371fc3](https://github.com/Financial-Times/origami/commit/c371fc3f7f2d66266dbca95862ecef3ddeb1f339))
23
51
 
24
52
  ## [1.9.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.8.1...o-autocomplete-v1.9.0) (2023-09-08)
25
53
 
26
-
27
54
  ### Features
28
55
 
29
- * Add an `autoselect` option ([c414db4](https://github.com/Financial-Times/origami/commit/c414db4780e8f74bffb25e9a04004c4d450077f4))
56
+ - Add an `autoselect` option ([c414db4](https://github.com/Financial-Times/origami/commit/c414db4780e8f74bffb25e9a04004c4d450077f4))
30
57
 
31
58
  ## [1.8.1](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.8.0...o-autocomplete-v1.8.1) (2023-08-25)
32
59
 
33
-
34
60
  ### Bug Fixes
35
61
 
36
- * update o-typography dependency ([fb45b47](https://github.com/Financial-Times/origami/commit/fb45b47274241ea828f7dd50233441a76a215a51))
62
+ - update o-typography dependency ([fb45b47](https://github.com/Financial-Times/origami/commit/fb45b47274241ea828f7dd50233441a76a215a51))
37
63
 
38
64
  ## [1.8.0](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.7.4...o-autocomplete-v1.8.0) (2023-05-30)
39
65
 
40
-
41
66
  ### Features
42
67
 
43
- * autocomplete, add a suggestionTemplate override option ([23e1397](https://www.github.com/Financial-Times/origami/commit/23e1397deb29034faaf009c16e41ab169dcc3a42))
68
+ - autocomplete, add a suggestionTemplate override option ([23e1397](https://www.github.com/Financial-Times/origami/commit/23e1397deb29034faaf009c16e41ab169dcc3a42))
44
69
 
45
70
  ### [1.7.4](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.7.3...o-autocomplete-v1.7.4) (2023-04-28)
46
71
 
47
-
48
72
  ### Bug Fixes
49
73
 
50
- * Require latest minor version of o-colors, o-buttons, and o-forms ([#1098](https://www.github.com/Financial-Times/origami/issues/1098)) ([b856ca6](https://www.github.com/Financial-Times/origami/commit/b856ca66c9ec555f3c70833ffa35cb05cd19841f))
74
+ - Require latest minor version of o-colors, o-buttons, and o-forms ([#1098](https://www.github.com/Financial-Times/origami/issues/1098)) ([b856ca6](https://www.github.com/Financial-Times/origami/commit/b856ca66c9ec555f3c70833ffa35cb05cd19841f))
51
75
 
52
76
  ### [1.7.3](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.7.2...o-autocomplete-v1.7.3) (2023-01-20)
53
77
 
54
-
55
78
  ### Bug Fixes
56
79
 
57
- * ensure components depend on the latest o-normalise version ([e910236](https://www.github.com/Financial-Times/origami/commit/e910236454318ce1bf198a06da7e76c0893c9142))
80
+ - ensure components depend on the latest o-normalise version ([e910236](https://www.github.com/Financial-Times/origami/commit/e910236454318ce1bf198a06da7e76c0893c9142))
58
81
 
59
82
  ### [1.7.2](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.7.1...o-autocomplete-v1.7.2) (2022-12-21)
60
83
 
61
-
62
84
  ### Bug Fixes
63
85
 
64
- * require 3.3.0 or higher ([fc180c6](https://www.github.com/Financial-Times/origami/commit/fc180c619755daa1b7bfe65509f354cf0de113bf))
86
+ - require 3.3.0 or higher ([fc180c6](https://www.github.com/Financial-Times/origami/commit/fc180c619755daa1b7bfe65509f354cf0de113bf))
65
87
 
66
88
  ### [1.7.1](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.7.0...o-autocomplete-v1.7.1) (2022-12-08)
67
89
 
68
-
69
90
  ### Bug Fixes
70
91
 
71
- * handle dynamic input changes when validating forms ([69ac478](https://www.github.com/Financial-Times/origami/commit/69ac4780922aded1dd4ce9b62b8437c454f0adba))
92
+ - handle dynamic input changes when validating forms ([69ac478](https://www.github.com/Financial-Times/origami/commit/69ac4780922aded1dd4ce9b62b8437c454f0adba))
72
93
 
73
94
  ## [1.7.0](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.6.2...o-autocomplete-v1.7.0) (2022-09-14)
74
95
 
75
-
76
96
  ### Features
77
97
 
78
- * autocomplete, add a `defaultValue` for a default input value ([#812](https://www.github.com/Financial-Times/origami/issues/812)) ([70a77ae](https://www.github.com/Financial-Times/origami/commit/70a77ae218c9c19967fe3bb32c18206d7cd9c2c3))
98
+ - autocomplete, add a `defaultValue` for a default input value ([#812](https://www.github.com/Financial-Times/origami/issues/812)) ([70a77ae](https://www.github.com/Financial-Times/origami/commit/70a77ae218c9c19967fe3bb32c18206d7cd9c2c3))
79
99
 
80
100
  ### [1.6.2](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.6.1...o-autocomplete-v1.6.2) (2022-04-21)
81
101
 
82
-
83
102
  ### Bug Fixes
84
103
 
85
- * Adds basic existence checking to most module entry points ([#714](https://www.github.com/Financial-Times/origami/issues/714)) ([7ba3a61](https://www.github.com/Financial-Times/origami/commit/7ba3a61d0de2a32d3a27a225fd4258b3820c7bda))
104
+ - Adds basic existence checking to most module entry points ([#714](https://www.github.com/Financial-Times/origami/issues/714)) ([7ba3a61](https://www.github.com/Financial-Times/origami/commit/7ba3a61d0de2a32d3a27a225fd4258b3820c7bda))
86
105
 
87
106
  ### [1.6.1](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.6.0...o-autocomplete-v1.6.1) (2022-01-13)
88
107
 
89
-
90
108
  ### Bug Fixes
91
109
 
92
- * expand all uses of docs to documentation ([26f8d9d](https://www.github.com/Financial-Times/origami/commit/26f8d9d8cbbe3e78902d8c3951b37e08150a77bd))
110
+ - expand all uses of docs to documentation ([26f8d9d](https://www.github.com/Financial-Times/origami/commit/26f8d9d8cbbe3e78902d8c3951b37e08150a77bd))
93
111
 
94
112
  ## [1.6.0](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.5.0...o-autocomplete-v1.6.0) (2021-12-09)
95
113
 
96
-
97
114
  ### Features
98
115
 
99
- * support internal brand on o-autocomplete ([f519cf8](https://www.github.com/Financial-Times/origami/commit/f519cf8b668304ece9e0cc5e64940ad4295343ce))
116
+ - support internal brand on o-autocomplete ([f519cf8](https://www.github.com/Financial-Times/origami/commit/f519cf8b668304ece9e0cc5e64940ad4295343ce))
100
117
 
101
118
  ## [1.5.0](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.4.1...o-autocomplete-v1.5.0) (2021-11-24)
102
119
 
103
-
104
120
  ### Features
105
121
 
106
- * allow npm 8 in engines config ([eeb1cae](https://www.github.com/Financial-Times/origami/commit/eeb1cae6e7f0379e647f2b41240b1f294997d528))
122
+ - allow npm 8 in engines config ([eeb1cae](https://www.github.com/Financial-Times/origami/commit/eeb1cae6e7f0379e647f2b41240b1f294997d528))
107
123
 
108
124
  ### [1.4.1](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.4.0...o-autocomplete-v1.4.1) (2021-11-08)
109
125
 
110
-
111
126
  ### Bug Fixes
112
127
 
113
- * pin components to latest o-brand, or greater ([3a6ccea](https://www.github.com/Financial-Times/origami/commit/3a6ccea1e838e4a2003322ca1f855d0b87b26b60))
128
+ - pin components to latest o-brand, or greater ([3a6ccea](https://www.github.com/Financial-Times/origami/commit/3a6ccea1e838e4a2003322ca1f855d0b87b26b60))
114
129
 
115
130
  ## [1.4.0](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.3.2...o-autocomplete-v1.4.0) (2021-11-08)
116
131
 
117
-
118
132
  ### Features
119
133
 
120
- * Rename master brand in component origami.json ([f642faf](https://www.github.com/Financial-Times/origami/commit/f642faf0574d84ea8185b56e6090c8015def27e6))
134
+ - Rename master brand in component origami.json ([f642faf](https://www.github.com/Financial-Times/origami/commit/f642faf0574d84ea8185b56e6090c8015def27e6))
121
135
 
122
136
  ### [1.3.2](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.3.1...o-autocomplete-v1.3.2) (2021-11-02)
123
137
 
124
-
125
138
  ### Bug Fixes
126
139
 
127
- * correct o-autocomplete markup ([f3d73b6](https://www.github.com/Financial-Times/origami/commit/f3d73b623d19bdfb7fac507cd40712d0032648fb))
128
- * Update `o-brand` in components, replace "master" with "core" ([322617e](https://www.github.com/Financial-Times/origami/commit/322617ea80f30a6825d9c36872e05574b871ea82))
140
+ - correct o-autocomplete markup ([f3d73b6](https://www.github.com/Financial-Times/origami/commit/f3d73b623d19bdfb7fac507cd40712d0032648fb))
141
+ - Update `o-brand` in components, replace "master" with "core" ([322617e](https://www.github.com/Financial-Times/origami/commit/322617ea80f30a6825d9c36872e05574b871ea82))
129
142
 
130
143
  ### [1.3.1](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.3.0...o-autocomplete-v1.3.1) (2021-09-21)
131
144
 
132
-
133
145
  ### Bug Fixes
134
146
 
135
- * Add homepage, bugs and support email to the package.json ([6c0de60](https://www.github.com/Financial-Times/origami/commit/6c0de60ebd6e64c4dd16d000fcc6b79412ce30f4))
136
- * update bugs urls ([3ea0ca0](https://www.github.com/Financial-Times/origami/commit/3ea0ca03bcb6e55142a77387ad0fff5ddf056d44))
137
- * update origami json urls ([c757653](https://www.github.com/Financial-Times/origami/commit/c7576532b5a14f0462d5346dfb63238be025602e))
147
+ - Add homepage, bugs and support email to the package.json ([6c0de60](https://www.github.com/Financial-Times/origami/commit/6c0de60ebd6e64c4dd16d000fcc6b79412ce30f4))
148
+ - update bugs urls ([3ea0ca0](https://www.github.com/Financial-Times/origami/commit/3ea0ca03bcb6e55142a77387ad0fff5ddf056d44))
149
+ - update origami json urls ([c757653](https://www.github.com/Financial-Times/origami/commit/c7576532b5a14f0462d5346dfb63238be025602e))
package/MIGRATION.md ADDED
@@ -0,0 +1,18 @@
1
+ ## Migration Guide
2
+
3
+ ### Migrating from v1 to v2
4
+
5
+ This major release introduces a new design language and visually breaking changes. This includes mobile optimised typography, icons, and buttons. It also removes peer dependencies from deprecated "o2" components.
6
+
7
+ To upgrade, replace the following "o2" components with their "o3" equivalent:
8
+
9
+ - [o-normalise](../o-normalise/MIGRATION.md)
10
+ - [o-spacing](../o-spacing/MIGRATION.md)
11
+ - [o-colors](../o-colors/MIGRATION.md)
12
+ - [o-icons](../o-icons/MIGRATION.md)
13
+ - [o-buttons](../o-buttons/MIGRATION.md)
14
+ - [o-typography](../o-typography/MIGRATION.md)
15
+ - [o-editorial-typography](../o-editorial-typography/MIGRATION.md)
16
+ - [o-big-number](../o-big-number/MIGRATION.md)
17
+ - [o-quote](../o-quote/MIGRATION.md)
18
+ - [o-fonts](../o-fonts/MIGRATION.md)
package/README.md CHANGED
@@ -4,18 +4,18 @@ An Origami component for autocomplete inputs. This is built on top of the excell
4
4
 
5
5
  - [Usage](#usage)
6
6
  - [Markup](#markup)
7
- - [For a static set of suggestions](#for-a-static-set-of-suggestions)
8
- - [For a dynamic set of suggestions](#for-a-dynamic-set-of-suggestions)
9
- - [Use with o-forms](#use-with-o-forms)
7
+ - [For a static set of suggestions](#for-a-static-set-of-suggestions)
8
+ - [For a dynamic set of suggestions](#for-a-dynamic-set-of-suggestions)
9
+ - [Use with o-forms](#use-with-o-forms)
10
10
  - [Sass](#sass)
11
11
  - [JavaScript](#javascript)
12
- - [dynamic suggestions function](#dynamic-suggestions-function)
13
- - [mapOptionToSuggestedValue](#mapoptiontosuggestedvalue)
14
- - [onConfirm](#onconfirm)
12
+ - [dynamic suggestions function](#dynamic-suggestions-function)
13
+ - [mapOptionToSuggestedValue](#mapoptiontosuggestedvalue)
14
+ - [onConfirm](#onconfirm)
15
15
  - [Keyboard Support](#keyboard-support)
16
- - [When focus is within the text input](#when-focus-is-within-the-text-input)
17
- - [When focus is within the suggestions menu](#when-focus-is-within-the-suggestions-menu)
18
- - [When focus is within the clear button](#when-focus-is-within-the-clear-button)
16
+ - [When focus is within the text input](#when-focus-is-within-the-text-input)
17
+ - [When focus is within the suggestions menu](#when-focus-is-within-the-suggestions-menu)
18
+ - [When focus is within the clear button](#when-focus-is-within-the-clear-button)
19
19
  - [Migration](#migration)
20
20
  - [Contact](#contact)
21
21
  - [Licence](#licence)
@@ -33,11 +33,11 @@ To provide a static set of suggestions, we recommend using a `select` element. o
33
33
  ```html
34
34
  <label for="my-autocomplete">Select your country</label>
35
35
  <span data-o-component="o-autocomplete" class="o-autocomplete">
36
- <select id="my-autocomplete">
37
- <option value="fr">France</option>
38
- <option value="de">Germany</option>
39
- <option value="gb">United Kingdom</option>
40
- </select>
36
+ <select id="my-autocomplete">
37
+ <option value="fr">France</option>
38
+ <option value="de">Germany</option>
39
+ <option value="gb">United Kingdom</option>
40
+ </select>
41
41
  </span>
42
42
  ```
43
43
 
@@ -46,9 +46,10 @@ To provide a static set of suggestions, we recommend using a `select` element. o
46
46
  To provide a dynamic set of suggestions, provide a javascript function or name of a javascript function on the window object which follows the [dynamic-suggestions-function](#dynamic-suggestions-function) <abbr title="application programming interface">API</abbr>.
47
47
 
48
48
  The input element requires an `id` attribute, this is used within the component to implement the accessibility features.
49
+
49
50
  ```html
50
51
  <span data-o-component="o-autocomplete" class="o-autocomplete">
51
- <input id="my-autocomplete" type="text" >
52
+ <input id="my-autocomplete" type="text" />
52
53
  </span>
53
54
  ```
54
55
 
@@ -57,27 +58,29 @@ The input element requires an `id` attribute, this is used within the component
57
58
  To have styling for labels, you will need to use [o-forms](https://registry.origami.ft.com/components/o-forms) as part of the autocomplete implementation.
58
59
 
59
60
  Below is an example of how to combine o-forms and o-autocomplete components together. Note the `label` and `select` element are connected using `for` and `id` attributes.
61
+
60
62
  ```html
61
- <span class="o-forms-field" >
62
- <label for="my-autocomplete" class="o-forms-title">
63
- <span class="o-forms-title__main">Select your country</span>
64
- </label>
65
- <span class="o-forms-input o-forms-input--select">
66
- <span data-o-component="o-autocomplete" class="o-autocomplete">
67
- <select id="my-autocomplete">
68
- <option value=""></option>
69
- <option>Afghanistan</option>
70
- </select>
71
- </span>
72
- </span>
63
+ <span class="o-forms-field">
64
+ <label for="my-autocomplete" class="o-forms-title">
65
+ <span class="o-forms-title__main">Select your country</span>
66
+ </label>
67
+ <span class="o-forms-input o-forms-input--select">
68
+ <span data-o-component="o-autocomplete" class="o-autocomplete">
69
+ <select id="my-autocomplete">
70
+ <option value=""></option>
71
+ <option>Afghanistan</option>
72
+ </select>
73
+ </span>
74
+ </span>
73
75
  </span>
74
76
  ```
77
+
75
78
  ## Sass
76
79
 
77
80
  Use `@include oAutocomplete()` to include styles for all `o-autocomplete` features.
78
81
 
79
82
  ```scss
80
- @import "@financial-times/o-autocomplete/main";
83
+ @import '@financial-times/o-autocomplete/main';
81
84
 
82
85
  @include oAutocomplete();
83
86
  ```
@@ -86,7 +89,7 @@ Use `@include oAutocomplete()` to include styles for all `o-autocomplete` featur
86
89
 
87
90
  JavaScript is initialised automatically for [Origami Build Service](https://www.ft.com/__origami/service/build/v3/) users.
88
91
 
89
- If your project is using a manual build process, initialise `o-autocomplete` manually.
92
+ If your project is using a manual build process, initialise `o-autocomplete` manually.
90
93
  For example call the `init` method to initialise all `o-autocomplete` instances in the document:
91
94
 
92
95
  ```js
@@ -98,9 +101,12 @@ Or pass an element to initialise a specific `o-autocomplete` instance:
98
101
 
99
102
  ```js
100
103
  import oAutocomplete from 'o-autocomplete';
101
- const oAutocompleteElement = document.getElementById('my-o-autocomplete-element');
104
+ const oAutocompleteElement = document.getElementById(
105
+ 'my-o-autocomplete-element'
106
+ );
102
107
  new oAutocomplete(oAutocompleteElement);
103
108
  ```
109
+
104
110
  ### dynamic suggestions function
105
111
 
106
112
  #### Example
@@ -117,15 +123,17 @@ import oAutocomplete from 'o-autocomplete';
117
123
  * @param {string} query - Text which was typed into the autocomplete by the user
118
124
  * @param {PopulateOptions} populateOptions - Function to call when ready to update the suggestions dropdown
119
125
  * @returns {void}
120
- */
126
+ */
121
127
  async function customSuggestions(query, populateOptions) {
122
128
  const suggestions = await getSuggestions(query);
123
129
  populateOptions(suggestions);
124
130
  }
125
131
 
126
- const oAutocompleteElement = document.getElementById('my-o-autocomplete-element');
132
+ const oAutocompleteElement = document.getElementById(
133
+ 'my-o-autocomplete-element'
134
+ );
127
135
  new oAutocomplete(oAutocompleteElement, {
128
- source: customSuggestions
136
+ source: customSuggestions,
129
137
  });
130
138
  ```
131
139
 
@@ -135,20 +143,20 @@ If wanting to supply dynamic suggestions, you will need to provide a function wh
135
143
 
136
144
  #### (query, suggestionsCallback) ⇒ <code>void</code>
137
145
 
138
- | Param | Type | Description |
139
- | --- | --- | --- |
140
- | query | <code>string</code> | Text which was typed into the text input |
146
+ | Param | Type | Description |
147
+ | ------------------- | -------------------------------------------------------- | ---------------------------------------------------------- |
148
+ | query | <code>string</code> | Text which was typed into the text input |
141
149
  | suggestionsCallback | [<code>suggestionsCallback</code>](#suggestionsCallback) | Function to call when ready to update the suggestions menu |
142
150
 
143
151
  <a name="suggestionsCallback"></a>
144
152
 
145
153
  #### suggestionsCallback : <code>function</code>
146
- **Properties**
147
154
 
148
- | Name | Type | Description |
149
- | --- | --- | --- |
150
- | options | <code>Array.&lt;*&gt;</code> | The options which match the entered query |
155
+ **Properties**
151
156
 
157
+ | Name | Type | Description |
158
+ | ------- | ----------------------------- | ----------------------------------------- |
159
+ | options | <code>Array.&lt;\*&gt;</code> | The options which match the entered query |
152
160
 
153
161
  ### mapOptionToSuggestedValue
154
162
 
@@ -157,7 +165,6 @@ If the `source` function is returning an array of strings which are already suit
157
165
 
158
166
  The most common scenario which requires having to define a `mapOptionToSuggestedValue` function is when the `source` function is returning an array of objects, where one of the properties in the object should be used as the suggestion.
159
167
 
160
-
161
168
  #### Example
162
169
 
163
170
  ```js
@@ -171,25 +178,28 @@ async function customSuggestions(query, populateOptions) {
171
178
  /**
172
179
  * @param {{"suggestionText": string}} option - The option to transform into a suggestion string
173
180
  * @returns {string} The string to display as the suggestions for this option
174
- */
181
+ */
175
182
  function mapOptionToSuggestedValue(option) {
176
183
  return option.suggestionText;
177
184
  }
178
185
 
179
- const oAutocompleteElement = document.getElementById('my-o-autocomplete-element');
186
+ const oAutocompleteElement = document.getElementById(
187
+ 'my-o-autocomplete-element'
188
+ );
180
189
  new oAutocomplete(oAutocompleteElement, {
181
- mapOptionToSuggestedValue,
182
- source: customSuggestions,
190
+ mapOptionToSuggestedValue,
191
+ source: customSuggestions,
183
192
  });
184
193
  ```
185
194
 
186
195
  <a name="MapOptionToSuggestedValue"></a>
187
196
 
188
197
  #### MapOptionToSuggestedValue ⇒ <code>string</code>
198
+
189
199
  **Returns**: <code>string</code> - The string to display as the suggestions for this option
190
200
 
191
- | Param | Type | Description |
192
- | --- | --- | --- |
201
+ | Param | Type | Description |
202
+ | ------ | --------------- | ------------------------------------------------ |
193
203
  | option | <code>\*</code> | The option to transform into a suggestion string |
194
204
 
195
205
  ### onConfirm
@@ -229,7 +239,6 @@ new oAutocomplete(oAutocompleteElement, {
229
239
  });
230
240
  ```
231
241
 
232
-
233
242
  ### suggestionTemplate
234
243
 
235
244
  This function is used to override the default rendering of suggestion items, with a function that returns a custom HTML string for the given option.
@@ -265,10 +274,12 @@ function suggestionTemplate(option) {
265
274
  `;
266
275
  }
267
276
 
268
- const oAutocompleteElement = document.getElementById('my-o-autocomplete-element');
277
+ const oAutocompleteElement = document.getElementById(
278
+ 'my-o-autocomplete-element'
279
+ );
269
280
  new oAutocomplete(oAutocompleteElement, {
270
- suggestionTemplate,
271
- source: customSuggestions,
281
+ suggestionTemplate,
282
+ source: customSuggestions,
272
283
  });
273
284
  ```
274
285
 
@@ -278,23 +289,26 @@ Using the `query` value to apply highlighting to one of the `option` properties:
278
289
  import oAutocomplete from 'o-autocomplete';
279
290
 
280
291
  async function customSuggestions(query, populateOptions) {
281
- const suggestions = await getSuggestions(query);
282
- populateOptions(suggestions);
292
+ const suggestions = await getSuggestions(query);
293
+ populateOptions(suggestions);
283
294
  }
284
295
 
285
296
  function highlightSuggestion(suggestion, query) {
286
- const result = suggestion.split('');
287
-
288
- const matchIndex = suggestion.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
289
- return result.map(function(character, index) {
290
- let shouldHighlight = true;
291
- const hasMatched = matchIndex > -1;
292
- const characterIsWithinMatch = index >= matchIndex && index <= matchIndex + query.length - 1;
293
- if (hasMatched && characterIsWithinMatch) {
294
- shouldHighlight = false;
295
- }
296
- return [character, shouldHighlight];
297
- });
297
+ const result = suggestion.split('');
298
+
299
+ const matchIndex = suggestion
300
+ .toLocaleLowerCase()
301
+ .indexOf(query.toLocaleLowerCase());
302
+ return result.map(function (character, index) {
303
+ let shouldHighlight = true;
304
+ const hasMatched = matchIndex > -1;
305
+ const characterIsWithinMatch =
306
+ index >= matchIndex && index <= matchIndex + query.length - 1;
307
+ if (hasMatched && characterIsWithinMatch) {
308
+ shouldHighlight = false;
309
+ }
310
+ return [character, shouldHighlight];
311
+ });
298
312
  }
299
313
 
300
314
  /**
@@ -302,39 +316,42 @@ function highlightSuggestion(suggestion, query) {
302
316
  * @param {string} [query] - Text which was typed into the autocomplete text input field by the user
303
317
  * @returns {string} The HTML to render in the suggestion list*/
304
318
  function suggestionTemplate(option, query) {
305
- const characters = highlightSuggestion(option.name, query || option.name);
306
-
307
- let output = '';
308
- for (const [character, shoudHighlight] of characters) {
309
- if (shoudHighlight) {
310
- output += `<span class="o-autocomplete__option--highlight">${character}</span>`;
311
- } else {
312
- output += `${character}`;
313
- }
314
- }
315
- output += ` (${option.role})`;
316
- const span = document.createElement('span');
317
- span.setAttribute('aria-label', option.name);
318
- span.innerHTML = output;
319
- return span.outerHTML;
319
+ const characters = highlightSuggestion(option.name, query || option.name);
320
+
321
+ let output = '';
322
+ for (const [character, shoudHighlight] of characters) {
323
+ if (shoudHighlight) {
324
+ output += `<span class="o-autocomplete__option--highlight">${character}</span>`;
325
+ } else {
326
+ output += `${character}`;
327
+ }
328
+ }
329
+ output += ` (${option.role})`;
330
+ const span = document.createElement('span');
331
+ span.setAttribute('aria-label', option.name);
332
+ span.innerHTML = output;
333
+ return span.outerHTML;
320
334
  }
321
335
 
322
- const oAutocompleteElement = document.getElementById('my-o-autocomplete-element');
336
+ const oAutocompleteElement = document.getElementById(
337
+ 'my-o-autocomplete-element'
338
+ );
323
339
  new oAutocomplete(oAutocompleteElement, {
324
- suggestionTemplate,
325
- source: customSuggestions,
340
+ suggestionTemplate,
341
+ source: customSuggestions,
326
342
  });
327
343
  ```
328
344
 
329
345
  <a name="SuggestionTemplate"></a>
330
346
 
331
347
  #### SuggestionTemplate ⇒ <code>string</code>
348
+
332
349
  **Returns**: <code>string</code> - The HTML string to render as the suggestion for this option
333
350
 
334
- | Param | Type | Description |
335
- | --- | --- | --- |
336
- | option | <code>\*</code> | The option to transform into a suggestion |
337
- | query | <code>string</code> | Text which was typed into the autocomplete text input field by the user |
351
+ | Param | Type | Description |
352
+ | ------ | ------------------- | ----------------------------------------------------------------------- |
353
+ | option | <code>\*</code> | The option to transform into a suggestion |
354
+ | query | <code>string</code> | Text which was typed into the autocomplete text input field by the user |
338
355
 
339
356
  ### onConfirm
340
357
 
@@ -377,8 +394,8 @@ new oAutocomplete(oAutocompleteElement, {
377
394
 
378
395
  #### onConfirm ⇒ <code>void</code>
379
396
 
380
- | Param | Type | Description |
381
- | --- | --- | --- |
397
+ | Param | Type | Description |
398
+ | ------ | --------------- | ---------------------------- |
382
399
  | option | <code>\*</code> | The option the user selected |
383
400
 
384
401
  #### `defaultValue` (default: `''`)
@@ -393,40 +410,42 @@ _When progressively enhancing a [static set of suggestions](#for-a-static-set-of
393
410
 
394
411
  ### When focus is within the text input
395
412
 
396
- Key|Function
397
- ---|---
398
- Down Arrow | If the suggestions menu is displayed, moves focus to the first suggested value in the suggestions menu.
399
- Enter | If the suggestions menu is displayed, does nothing.
400
- Escape | If the suggestions menu is displayed, closes it.
413
+ | Key | Function |
414
+ | ---------- | ------------------------------------------------------------------------------------------------------- |
415
+ | Down Arrow | If the suggestions menu is displayed, moves focus to the first suggested value in the suggestions menu. |
416
+ | Enter | If the suggestions menu is displayed, does nothing. |
417
+ | Escape | If the suggestions menu is displayed, closes it. |
401
418
 
402
419
  ### When focus is within the suggestions menu
403
420
 
404
- Key|Function
405
- ---|---
406
- Enter | <ul><li>Sets the text input value to the content of the focused option in the suggestions menu.</li><li>Closes the suggestions menu.</li><li>Sets focus on the text input.</li></ul>
407
- Tab | <ul><li>Sets the text input value to the content of the focused option in the suggestions menu.</li><li>Closes the suggestions menu.</li><li>Sets focus on the clear button.</li></ul>
408
- Space | <ul><li>Sets the text input value to the content of the focused option in the suggestions menu.</li><li>Closes the suggestions menu.</li><li>Sets focus on the text input.</li></ul>
409
- Up Arrow | If focus is on the first option, returns focus to the text input. Otherwise, moves focus to and selects the previous option in the suggestions menu.
410
- Down Arrow | If focus is on the last option, does nothing. Otherwise, moves focus to and selects the next option in the suggestions menu.
411
- Backspace | Returns focus to the text input and deletes the character prior to the cursor
412
- Printable Characters | <ul><li>Moves focus to the text input.</li><li>Types the characters into the text input.</li></ul>
421
+ | Key | Function |
422
+ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
423
+ | Enter | <ul><li>Sets the text input value to the content of the focused option in the suggestions menu.</li><li>Closes the suggestions menu.</li><li>Sets focus on the text input.</li></ul> |
424
+ | Tab | <ul><li>Sets the text input value to the content of the focused option in the suggestions menu.</li><li>Closes the suggestions menu.</li><li>Sets focus on the clear button.</li></ul> |
425
+ | Space | <ul><li>Sets the text input value to the content of the focused option in the suggestions menu.</li><li>Closes the suggestions menu.</li><li>Sets focus on the text input.</li></ul> |
426
+ | Up Arrow | If focus is on the first option, returns focus to the text input. Otherwise, moves focus to and selects the previous option in the suggestions menu. |
427
+ | Down Arrow | If focus is on the last option, does nothing. Otherwise, moves focus to and selects the next option in the suggestions menu. |
428
+ | Backspace | Returns focus to the text input and deletes the character prior to the cursor |
429
+ | Printable Characters | <ul><li>Moves focus to the text input.</li><li>Types the characters into the text input.</li></ul> |
413
430
 
414
431
  ### When focus is within the clear button
415
432
 
416
- Key|Function
417
- ---|---
418
- Enter | <ul><li>Moves focus to the text input.</li><li>Removes all the characters within the text input.</li></ul>
419
- Space | <ul><li>Moves focus to the text input.</li><li>Removes all the characters within the text input.</li></ul>
420
-
433
+ | Key | Function |
434
+ | ----- | ---------------------------------------------------------------------------------------------------------- |
435
+ | Enter | <ul><li>Moves focus to the text input.</li><li>Removes all the characters within the text input.</li></ul> |
436
+ | Space | <ul><li>Moves focus to the text input.</li><li>Removes all the characters within the text input.</li></ul> |
421
437
 
422
438
  ## Migration
423
439
 
424
- State | Major Version | Last Minor Release | Migration guide |
425
- :---: | :---: | :---: | :---:
426
- ✨ active | 1 | 1.0 | N/A |
440
+ | State | Major Version | Last Minor Release | Migration guide |
441
+ | :----------: | :-----------: | :----------------: | :---------------------------------------------------: |
442
+ | ⚠ maintained | 3 | n/a | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) |
443
+ | ⚠ maintained | 1 | 1.10 | N/A |
427
444
 
428
445
  ## Contact
446
+
429
447
  If you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/o-autocomplete/issues), visit [##origami-support](https://financialtimes.slack.com/messages/#origami-support/) or email [origami.support@ft.com](mailto:origami.support@ft.com).
430
448
 
431
449
  ## Licence
450
+
432
451
  This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT).
package/main.scss CHANGED
@@ -1,13 +1,7 @@
1
1
  @import '@financial-times/math';
2
2
  @import '@financial-times/o-brand/main';
3
- @import '@financial-times/o-colors/main';
4
- @import '@financial-times/o-grid/main';
5
- @import '@financial-times/o-icons/main';
6
3
  @import '@financial-times/o-loading/main';
7
- @import '@financial-times/o-normalise/main';
8
- @import '@financial-times/o-spacing/main';
9
- @import '@financial-times/o-typography/main';
10
- @import '@financial-times/o-visual-effects/main';
4
+ @import '@financial-times/o-private-foundation/main';
11
5
 
12
6
  @import 'src/scss/variables';
13
7
  @import 'src/scss/brand';
@@ -19,7 +13,8 @@
19
13
  /// @include oAutocomplete($opts: (
20
14
  /// // your opts here
21
15
  /// ))
22
- @mixin oAutocomplete ($opts: ()) {
16
+ @mixin oAutocomplete($opts: ()) {
17
+ @include oPrivateFoundation();
23
18
  // content of primary mixin
24
19
  .o-autocomplete {
25
20
  position: relative;
@@ -27,17 +22,21 @@
27
22
  }
28
23
 
29
24
  .o-autocomplete__listbox-container {
30
- @include oTypographySans($scale: 0);
25
+ @include oPrivateTypographySans($scale: 0);
31
26
  grid-row: 1;
32
27
  grid-column: 1;
33
28
  }
34
29
 
35
30
  .o-autocomplete__visually-hidden {
36
- @include oNormaliseVisuallyHidden;
31
+ @include oPrivateNormaliseVisuallyHidden;
37
32
  }
38
33
 
39
34
  .o-autocomplete__clear {
40
- @include oIconsContent('cross', _oAutocompleteGet('search-close'), $size: $_o-autocomplete-icon-size);
35
+ @include oPrivateIconsContent(
36
+ 'cross',
37
+ _oAutocompleteGet('search-close'),
38
+ $size: $_o-autocomplete-icon-size
39
+ );
41
40
  border: 0;
42
41
  padding: 0;
43
42
  appearance: none;
@@ -47,7 +46,9 @@
47
46
  align-self: center;
48
47
  justify-self: end;
49
48
 
50
- $margin-size: calc(#{$_o-autocomplete-input-space} - #{$_o-autocomplete-icon-size-excess-whitespace});
49
+ $margin-size: calc(
50
+ #{$_o-autocomplete-input-space} - #{$_o-autocomplete-icon-size-excess-whitespace}
51
+ );
51
52
  margin-left: $margin-size;
52
53
  margin-right: $margin-size;
53
54
 
@@ -60,7 +61,9 @@
60
61
  box-sizing: border-box;
61
62
  // This is to make the input stop before the clear button.
62
63
  // Without this, the input's text would flow behind the clear button.
63
- padding-right: calc(#{$_o-autocomplete-icon-size} + #{$_o-autocomplete-input-space * 2});
64
+ padding-right: calc(
65
+ #{$_o-autocomplete-icon-size} + #{$_o-autocomplete-input-space * 2}
66
+ );
64
67
  }
65
68
 
66
69
  .o-autocomplete__input::-ms-clear {
@@ -68,18 +71,18 @@
68
71
  }
69
72
 
70
73
  .o-autocomplete__menu {
71
- @include oVisualEffectsShadowContent('high');
72
- top: oSpacingByName('s1');
73
- background-color: oColorsByName('white');
74
+ @include oPrivateVisualEffectsShadowContent('high');
75
+ top: oPrivateSpacingByName('s1');
76
+ background-color: oPrivateFoundationGet('o3-color-palette-white');
74
77
  border-top: 0;
75
- color: oColorsByName('black');
78
+ color: oPrivateFoundationGet('o3-color-palette-black');
76
79
  margin: 0;
77
80
  max-height: 200px; // Make this configurable as it decides how many rows to show
78
81
  overflow-x: hidden;
79
- padding-left: oSpacingByName('s2');
80
- padding-right: oSpacingByName('s2');
81
- padding-top: oSpacingByName('s4');
82
- padding-bottom: oSpacingByName('s4');
82
+ padding-left: oPrivateSpacingByName('s2');
83
+ padding-right: oPrivateSpacingByName('s2');
84
+ padding-top: oPrivateSpacingByName('s4');
85
+ padding-bottom: oPrivateSpacingByName('s4');
83
86
  width: 100%;
84
87
  }
85
88
 
@@ -96,7 +99,7 @@
96
99
  }
97
100
 
98
101
  .o-autocomplete__menu--overlay {
99
- @include oVisualEffectsShadowContent('high');
102
+ @include oPrivateVisualEffectsShadowContent('high');
100
103
  box-sizing: border-box;
101
104
  }
102
105
 
@@ -110,10 +113,10 @@
110
113
  cursor: pointer;
111
114
  display: block;
112
115
  position: relative;
113
- padding-left: oSpacingByName('s1');
114
- padding-right: oSpacingByName('s1');
115
- padding-top: oSpacingByName('s2');
116
- padding-bottom: oSpacingByName('s2');
116
+ padding-left: oPrivateSpacingByName('s1');
117
+ padding-right: oPrivateSpacingByName('s1');
118
+ padding-top: oPrivateSpacingByName('s2');
119
+ padding-bottom: oPrivateSpacingByName('s2');
117
120
  }
118
121
 
119
122
  .o-autocomplete__option > * {
@@ -130,15 +133,22 @@
130
133
 
131
134
  .o-autocomplete__option--focused,
132
135
  .o-autocomplete__option:hover {
133
- background-color: oColorsByName('teal');
134
- border-color: oColorsByName('teal');
135
- color: oColorsByName('white');
136
+ background-color: oPrivateFoundationGet('o3-color-palette-teal');
137
+ border-color: oPrivateFoundationGet('o3-color-palette-teal');
138
+ color: oPrivateFoundationGet('o3-color-palette-white');
136
139
  outline: none;
137
140
  }
138
141
 
139
142
  .o-autocomplete__option--no-results {
140
- background-color: oColorsMix(white, black, 98); // #fafafa
141
- color: oColorsGetTextColor(oColorsMix(white, black, 98), $minimum-contrast: 'aa-normal');
143
+ background-color: oPrivateColorsMix(
144
+ 'o3-color-palette-white',
145
+ 'o3-color-palette-black',
146
+ 98
147
+ ); // #fafafa
148
+ color: oPrivateColorsGetTextColor(
149
+ oPrivateColorsMix('o3-color-palette-white', 'o3-color-palette-black', 98),
150
+ $minimum-contrast: 'aa-normal'
151
+ );
142
152
  cursor: not-allowed;
143
153
  }
144
154
 
@@ -146,12 +156,13 @@
146
156
  font-weight: bolder;
147
157
  }
148
158
 
149
-
150
159
  .o-autocomplete__menu-loading {
151
- @include oLoadingContent($opts: (
152
- size: 'mini',
153
- theme: 'dark'
154
- ));
160
+ @include oLoadingContent(
161
+ $opts: (
162
+ size: 'mini',
163
+ theme: 'dark',
164
+ )
165
+ );
155
166
  }
156
167
 
157
168
  // `.o-autocomplete__menu-loading` is declared twice intentionally.
@@ -163,21 +174,20 @@
163
174
  grid-row: 2;
164
175
  }
165
176
  .o-autocomplete__menu-loading-container {
166
- @include oVisualEffectsShadowContent('high');
177
+ @include oPrivateVisualEffectsShadowContent('high');
167
178
  display: flex;
168
179
  justify-content: center;
169
180
  align-items: center;
170
- padding: oSpacingByName('s2');
181
+ padding: oPrivateSpacingByName('s2');
171
182
  box-sizing: border-box;
172
183
  min-height: 40px;
173
- background-color: oColorsByName('white');
184
+ background-color: oPrivateFoundationGet('o3-color-palette-white');
174
185
  }
175
186
 
176
-
177
187
  .o-autocomplete__menu-loading-container,
178
188
  .o-autocomplete__menu--overlay {
179
189
  position: absolute;
180
- top: calc(100% + #{oSpacingByName('s1')});
190
+ top: calc(100% + #{oPrivateSpacingByName('s1')});
181
191
  left: 0;
182
192
  right: 0;
183
193
  z-index: 100;
package/package.json CHANGED
@@ -1,53 +1,47 @@
1
1
  {
2
- "name": "@financial-times/o-autocomplete",
3
- "version": "1.10.0",
4
- "description": "An origami component for autocomplete inputs",
5
- "keywords": [
6
- "autocomplete",
7
- "typeahead"
8
- ],
9
- "homepage": "https://registry.origami.ft.com/components/o-autocomplete",
10
- "bugs": {
11
- "url": "https://github.com/Financial-Times/origami/issues/new?labels=o-autocomplete,components",
12
- "email": "origami.support@ft.com",
13
- "slack": "#origami-support"
14
- },
15
- "repository": {
16
- "type": "git",
17
- "url": "git+https://github.com/Financial-Times/o-autocomplete.git"
18
- },
19
- "license": "MIT",
20
- "type": "module",
21
- "browser": "main.js",
22
- "scripts": {
23
- "build": "bash ../../scripts/component/build.bash",
24
- "test": "bash ../../scripts/component/test.bash",
25
- "debug:js": "bash ../../scripts/component/debug-js.bash",
26
- "lint": "bash ../../scripts/component/lint.bash",
27
- "watch": "bash ../../scripts/component/watch.bash"
28
- },
29
- "engines": {
30
- "npm": ">7"
31
- },
32
- "peerDependencies": {
33
- "@financial-times/math": "^1.0.0",
34
- "@financial-times/o-brand": "^4.1.0",
35
- "@financial-times/o-colors": "^6.5.0",
36
- "@financial-times/o-grid": "^6.0.0",
37
- "@financial-times/o-icons": "^7.0.1",
38
- "@financial-times/o-loading": "^5.0.0",
39
- "@financial-times/o-normalise": "^3.3.0",
40
- "@financial-times/o-spacing": "^3.0.0",
41
- "@financial-times/o-typography": "^7.4.1",
42
- "@financial-times/o-visual-effects": "^4.0.1"
43
- },
44
- "devDependencies": {
45
- "@financial-times/o-forms": "^9.9.0",
46
- "@financial-times/o-normalise": "^3.3.0",
47
- "@financial-times/o-utils": "^2.1.0"
48
- },
49
- "dependencies": {
50
- "@financial-times/accessible-autocomplete": "^3.1.0"
51
- },
52
- "private": false
2
+ "name": "@financial-times/o-autocomplete",
3
+ "version": "2.1.0",
4
+ "description": "An origami component for autocomplete inputs",
5
+ "keywords": [
6
+ "autocomplete",
7
+ "typeahead"
8
+ ],
9
+ "homepage": "https://registry.origami.ft.com/components/o-autocomplete",
10
+ "bugs": {
11
+ "url": "https://github.com/Financial-Times/origami/issues/new?labels=o-autocomplete,components",
12
+ "email": "origami.support@ft.com",
13
+ "slack": "#origami-support"
14
+ },
15
+ "repository": {
16
+ "type": "git",
17
+ "url": "git+https://github.com/Financial-Times/o-autocomplete.git"
18
+ },
19
+ "license": "MIT",
20
+ "type": "module",
21
+ "browser": "main.js",
22
+ "scripts": {
23
+ "build": "bash ../../scripts/component/build.bash",
24
+ "test": "bash ../../scripts/component/test.bash",
25
+ "debug:js": "bash ../../scripts/component/debug-js.bash",
26
+ "lint": "bash ../../scripts/component/lint.bash",
27
+ "watch": "bash ../../scripts/component/watch.bash"
28
+ },
29
+ "engines": {
30
+ "npm": ">7"
31
+ },
32
+ "peerDependencies": {
33
+ "@financial-times/math": "^1.0.0",
34
+ "@financial-times/o-brand": "^4.1.0",
35
+ "@financial-times/o-loading": "^6.0.0",
36
+ "@financial-times/o-private-foundation": "^1.0.0"
37
+ },
38
+ "devDependencies": {
39
+ "@financial-times/o-forms": "^10.0.0",
40
+ "@financial-times/o-normalise": "^3.3.2",
41
+ "@financial-times/o-utils": "^2.1.0"
42
+ },
43
+ "dependencies": {
44
+ "@financial-times/accessible-autocomplete": "^3.1.0"
45
+ },
46
+ "private": false
53
47
  }
package/src/js/autocomplete.js CHANGED
@@ -16,18 +16,19 @@ import accessibleAutocomplete from '@financial-times/accessible-autocomplete';
16
16
  /**
17
17
  * @param {string} suggestion - Text which is going to be suggested to the user
18
18
  * @param {string} query - Text which was typed into the autocomplete text input field by the user
19
+ * @param {boolean} isHighlightCorrespondingToMatch - Boolean to determine whether matching or non-matching characters should be highlighted.
19
20
  * @returns {CharacterHighlight[]} An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted.
20
21
  */
21
- function highlightSuggestion(suggestion, query) {
22
+ function highlightSuggestion(suggestion, query, isHighlightCorrespondingToMatch) {
22
23
  const result = suggestion.split('');
23
24
 
24
25
  const matchIndex = suggestion.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
25
26
  return result.map(function(character, index) {
26
- let shouldHighlight = true;
27
+ let shouldHighlight = !isHighlightCorrespondingToMatch;
27
28
  const hasMatched = matchIndex > -1;
28
29
  const characterIsWithinMatch = index >= matchIndex && index <= matchIndex + query.length - 1;
29
30
  if (hasMatched && characterIsWithinMatch) {
30
- shouldHighlight = false;
31
+ shouldHighlight = isHighlightCorrespondingToMatch;
31
32
  }
32
33
  return [character, shouldHighlight];
33
34
  });
@@ -182,6 +183,7 @@ function initClearButton(instance) {
182
183
  * @property {MapOptionToSuggestedValue} [mapOptionToSuggestedValue] - Function which transforms a suggestion before rendering.
183
184
  * @property {onConfirm} [onConfirm] - Function which is called when the user selects an option
184
185
  * @property {SuggestionTemplate} [suggestionTemplate] - Function to override how a suggestion item is rendered.
186
+ * @property {boolean} [isHighlightCorrespondingToMatch] - Boolean to determine whether matching or non-matching characters should be highlighted.
185
187
  * @property {boolean} [autoselect] - Boolean to specify whether first option in suggestions list is highlighted.
186
188
  */
187
189
 
@@ -210,6 +212,7 @@ class Autocomplete {
210
212
  if (opts.suggestionTemplate) {
211
213
  this.options.suggestionTemplate = opts.suggestionTemplate;
212
214
  }
215
+ this.options.isHighlightCorrespondingToMatch = Boolean(opts.isHighlightCorrespondingToMatch);
213
216
  if (opts.autoselect) {
214
217
  this.options.autoselect = opts.autoselect;
215
218
  }
@@ -293,10 +296,17 @@ class Autocomplete {
293
296
  * @returns {string|undefined} HTML string to represent a single suggestion.
294
297
  */
295
298
  suggestion: (option, query) => {
299
+ const isHighlightCorrespondingToMatch = this.options.isHighlightCorrespondingToMatch;
300
+
296
301
  // If the suggestionTemplate override option is provided,
297
302
  // use that to render the suggestion.
298
303
  if(typeof this.options.suggestionTemplate === 'function') {
299
- return this.options.suggestionTemplate(option, query);
304
+ return this.options.suggestionTemplate(
305
+ option,
306
+ query,
307
+ highlightSuggestion,
308
+ isHighlightCorrespondingToMatch
309
+ );
300
310
  }
301
311
  if (typeof option === 'object') {
302
312
  // If the `mapOptionToSuggestedValue` function is defined
@@ -315,7 +325,7 @@ class Autocomplete {
315
325
  throw new Error(`The option trying to be displayed as a suggestion is not a string, it is "${typeof option}". o-autocomplete can only display strings as suggestions. Define a \`mapOptionToSuggestedValue\` function to convert the option into a string to be used as the suggestion.`);
316
326
  }
317
327
 
318
- return this.suggestionTemplate(option);
328
+ return this.suggestionTemplate(option, isHighlightCorrespondingToMatch);
319
329
  },
320
330
  /**
321
331
  * Used when a suggestion is selected, the return value of this will be used as the value for the input element.
@@ -387,15 +397,20 @@ class Autocomplete {
387
397
  * Used when rendering suggestions, the return value of this will be used as the innerHTML for a single suggestion.
388
398
  *
389
399
  * @param {string} suggestedValue The suggestion to apply the template with.
400
+ * @param {boolean} isHighlightCorrespondingToMatch Boolean to determine whether matching or non-matching characters should be highlighted.
390
401
  * @returns {string} HTML string to be represent a single suggestion.
391
402
  */
392
- suggestionTemplate (suggestedValue) {
403
+ suggestionTemplate (suggestedValue, isHighlightCorrespondingToMatch) {
393
404
  // o-autocomplete has a UI design to highlight characters in the suggestions.
394
405
  const input = this.autocompleteEl.querySelector('input');
395
406
  /**
396
407
  * @type {CharacterHighlight[]} An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted.
397
408
  */
398
- const characters = highlightSuggestion(suggestedValue, input ? input.value : suggestedValue);
409
+ const characters = highlightSuggestion(
410
+ suggestedValue,
411
+ input ? input.value : suggestedValue,
412
+ isHighlightCorrespondingToMatch
413
+ );
399
414
 
400
415
  let output = '';
401
416
  for (const [character, shoudHighlight] of characters) {
package/src/scss/_brand.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  @if oBrandIs('core') {
14
14
  @include oBrandDefine('o-autocomplete', 'core', (
15
15
  'variables': (
16
- search-close: oColorsByName('black-80'),
16
+ search-close: oPrivateFoundationGet('o3-color-palette-black-80'),
17
17
  ),
18
18
  'supports-variants': ()
19
19
  ));
@@ -22,7 +22,7 @@
22
22
  @if oBrandIs('internal') {
23
23
  @include oBrandDefine('o-autocomplete', 'internal', (
24
24
  'variables': (
25
- search-close: oColorsByName('black-80'),
25
+ search-close: oPrivateFoundationGet('o3-color-palette-black-80'),
26
26
  ),
27
27
  'supports-variants': ()
28
28
  ));
package/src/scss/_variables.scss CHANGED
@@ -1,3 +1,3 @@
1
1
  $_o-autocomplete-icon-size: 25px;
2
2
  $_o-autocomplete-icon-size-excess-whitespace: div($_o-autocomplete-icon-size, 4);
3
- $_o-autocomplete-input-space: oSpacingByName("s2"); // match o-forms, without a direct dependency
3
+ $_o-autocomplete-input-space: oPrivateSpacingByName("s2"); // match o-forms, without a direct dependency