@nyaruka/temba-components 0.123.0 → 0.124.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 (87) hide show
  1. package/.github/copilot-instructions.md +22 -4
  2. package/CHANGELOG.md +11 -0
  3. package/demo/drag-drop-demo.html +141 -0
  4. package/demo/index.html +15 -0
  5. package/demo/test-drag-drop.html +94 -0
  6. package/dist/temba-components.js +323 -191
  7. package/dist/temba-components.js.map +1 -1
  8. package/out-tsc/src/fields/FieldManager.js +27 -34
  9. package/out-tsc/src/fields/FieldManager.js.map +1 -1
  10. package/out-tsc/src/list/SortableList.js +257 -60
  11. package/out-tsc/src/list/SortableList.js.map +1 -1
  12. package/out-tsc/src/omnibox/Omnibox.js +1 -1
  13. package/out-tsc/src/omnibox/Omnibox.js.map +1 -1
  14. package/out-tsc/src/select/Select.js +198 -38
  15. package/out-tsc/src/select/Select.js.map +1 -1
  16. package/out-tsc/src/webchat/WebChat.js +5 -2
  17. package/out-tsc/src/webchat/WebChat.js.map +1 -1
  18. package/out-tsc/test/temba-flow-editor-node.test.js +273 -0
  19. package/out-tsc/test/temba-flow-editor-node.test.js.map +1 -0
  20. package/out-tsc/test/temba-flow-editor.test.js +244 -0
  21. package/out-tsc/test/temba-flow-editor.test.js.map +1 -0
  22. package/out-tsc/test/temba-flow-plumber.test.js +145 -0
  23. package/out-tsc/test/temba-flow-plumber.test.js.map +1 -0
  24. package/out-tsc/test/temba-flow-render.test.js +171 -0
  25. package/out-tsc/test/temba-flow-render.test.js.map +1 -0
  26. package/out-tsc/test/temba-omnibox.test.js +2 -3
  27. package/out-tsc/test/temba-omnibox.test.js.map +1 -1
  28. package/out-tsc/test/temba-select.test.js +134 -53
  29. package/out-tsc/test/temba-select.test.js.map +1 -1
  30. package/out-tsc/test/temba-sortable-list.test.js +91 -15
  31. package/out-tsc/test/temba-sortable-list.test.js.map +1 -1
  32. package/out-tsc/test/temba-webchat-lightbox-fix.test.js +42 -0
  33. package/out-tsc/test/temba-webchat-lightbox-fix.test.js.map +1 -0
  34. package/out-tsc/test/utils.test.js +30 -0
  35. package/out-tsc/test/utils.test.js.map +1 -1
  36. package/package.json +1 -1
  37. package/screenshots/truth/flow/editor-basic.png +0 -0
  38. package/screenshots/truth/list/fields-dragging.png +0 -0
  39. package/screenshots/truth/list/sortable-dragging.png +0 -0
  40. package/screenshots/truth/list/sortable-dropped.png +0 -0
  41. package/screenshots/truth/list/sortable.png +0 -0
  42. package/screenshots/truth/omnibox/selected.png +0 -0
  43. package/screenshots/truth/select/disabled-multi-selection.png +0 -0
  44. package/screenshots/truth/select/disabled-selection.png +0 -0
  45. package/screenshots/truth/select/disabled.png +0 -0
  46. package/screenshots/truth/select/embedded.png +0 -0
  47. package/screenshots/truth/select/empty-options.png +0 -0
  48. package/screenshots/truth/select/expression-selected.png +0 -0
  49. package/screenshots/truth/select/expressions.png +0 -0
  50. package/screenshots/truth/select/functions.png +0 -0
  51. package/screenshots/truth/select/local-options.png +0 -0
  52. package/screenshots/truth/select/multi-reorder-final.png +0 -0
  53. package/screenshots/truth/select/multi-reorder-initial.png +0 -0
  54. package/screenshots/truth/select/multi-with-endpoint.png +0 -0
  55. package/screenshots/truth/select/multiple-initial-values.png +0 -0
  56. package/screenshots/truth/select/remote-options.png +0 -0
  57. package/screenshots/truth/select/search-enabled.png +0 -0
  58. package/screenshots/truth/select/search-multi-no-matches.png +0 -0
  59. package/screenshots/truth/select/search-selected-focus.png +0 -0
  60. package/screenshots/truth/select/search-selected.png +0 -0
  61. package/screenshots/truth/select/search-with-selected.png +0 -0
  62. package/screenshots/truth/select/searching.png +0 -0
  63. package/screenshots/truth/select/selected-multi-maxitems-reached.png +0 -0
  64. package/screenshots/truth/select/selected-multi.png +0 -0
  65. package/screenshots/truth/select/selected-single.png +0 -0
  66. package/screenshots/truth/select/selection-clearable.png +0 -0
  67. package/screenshots/truth/select/static-initial-value.png +0 -0
  68. package/screenshots/truth/select/static-initial-via-selected.png +0 -0
  69. package/screenshots/truth/select/truncated-selection.png +0 -0
  70. package/screenshots/truth/select/with-placeholder.png +0 -0
  71. package/screenshots/truth/select/without-placeholder.png +0 -0
  72. package/screenshots/truth/templates/default.png +0 -0
  73. package/screenshots/truth/templates/unapproved.png +0 -0
  74. package/src/fields/FieldManager.ts +30 -38
  75. package/src/list/SortableList.ts +291 -67
  76. package/src/omnibox/Omnibox.ts +1 -1
  77. package/src/select/Select.ts +213 -42
  78. package/src/webchat/WebChat.ts +5 -2
  79. package/test/temba-flow-editor-node.test.ts +344 -0
  80. package/test/temba-flow-editor.test.ts +301 -0
  81. package/test/temba-flow-plumber.test.ts +189 -0
  82. package/test/temba-flow-render.test.ts +220 -0
  83. package/test/temba-omnibox.test.ts +2 -3
  84. package/test/temba-select.test.ts +180 -79
  85. package/test/temba-sortable-list.test.ts +108 -15
  86. package/test/temba-webchat-lightbox-fix.test.ts +57 -0
  87. package/test/utils.test.ts +52 -0
package/.github/copilot-instructions.md CHANGED
@@ -29,12 +29,29 @@ To check for coverage, use:
29
29
  yarn test --coverage
30
30
  ```
31
31
 
32
- You also can run an idividual test to speed up development
32
+
33
+ ### Isolating Tests for Quicker Development ###
34
+ You also can run an idividual test file to speed up development:
33
35
 
34
36
  ```bash
35
37
  yarn test test/temba-textinput.test.ts
36
38
  ```
37
39
 
40
+ You can isolate a specific test within a file you are working to speed things up by updating the method in the file from it(...) to it.only(...)
41
+
42
+ For example:
43
+ ```typescript
44
+ it('can select a single option', async () => {...});
45
+ ```
46
+ becomes..
47
+ ```typescript
48
+ it.only('can select a single option', async () => {...});
49
+ ```
50
+
51
+ By doing this and only running the individual test file, you can drastically speed up iteration while running tests.
52
+
53
+ ### Validation ###
54
+
38
55
  Before a PR is ready it must pass validation checks for linting, formatting, and tests. This will also report coverage and you need to manually verify coverage does not drop.
39
56
 
40
57
  ```bash
@@ -133,9 +150,10 @@ This ordering ensures:
133
150
 
134
151
  1. **Install dependencies:** `yarn install`
135
152
  2. **Start development server:** `yarn start`
136
- 3. **Run tests during development:** `yarn test:watch`
137
- 4. **Lint code:** `yarn lint`
138
- 5. **Build for production:** `yarn build`
153
+ 3. **Run tests during development:** `yarn test`
154
+ 4. **Pre-commit checks before committing:** `yarn pre-commit`
155
+ 5. **Validate changes:** `yarn validate`
156
+ 6. **Check Coverage:** Once validated, check for 100% coverage
139
157
 
140
158
  ## Code Quality
141
159
 
package/CHANGELOG.md CHANGED
@@ -4,8 +4,19 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
+ #### [v0.124.0](https://github.com/nyaruka/temba-components/compare/v0.123.0...v0.124.0)
8
+
9
+ - Add drag and drop reordering to multi-select components [`#546`](https://github.com/nyaruka/temba-components/pull/546)
10
+ - Add comprehensive test coverage for flow components [`#548`](https://github.com/nyaruka/temba-components/pull/548)
11
+ - Not sure this addresses the intermittent WebChat test failure, but I fundamentally agree with the changes anyways. [`#544`](https://github.com/nyaruka/temba-components/pull/544)
12
+ - Add comprehensive tests for flow components achieving 93.97% coverage [`3261100`](https://github.com/nyaruka/temba-components/commit/32611005a53f5ccac36b88cd50d88ed507605b6b)
13
+ - Implement new drag and drop behavior as requested - hide dragged items and fire events on drop only [`f7daecf`](https://github.com/nyaruka/temba-components/commit/f7daecf0c6737ddbecf85a4f3f726d94ffee08b8)
14
+ - Refactor SortableList to fix drag and drop reordering logic [`4b0a901`](https://github.com/nyaruka/temba-components/commit/4b0a901c7223dcefbed9eec888493b8e322c561f)
15
+
7
16
  #### [v0.123.0](https://github.com/nyaruka/temba-components/compare/v0.122.0...v0.123.0)
8
17
 
18
+ > 4 June 2025
19
+
9
20
  - Update commands for test and validate [`#543`](https://github.com/nyaruka/temba-components/pull/543)
10
21
  - Add comprehensive test coverage for RunList component [`#531`](https://github.com/nyaruka/temba-components/pull/531)
11
22
  - Fix screenshot tests for Copilot environment with adaptive threshold [`#538`](https://github.com/nyaruka/temba-components/pull/538)
package/demo/drag-drop-demo.html ADDED
@@ -0,0 +1,141 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Multi-Select Drag and Drop Demo</title>
6
+ <link
7
+ href="/static/css/temba-components.css"
8
+ rel="stylesheet"
9
+ type="text/css"
10
+ />
11
+ <style>
12
+ body {
13
+ font-family: sans-serif;
14
+ padding: 20px;
15
+ max-width: 800px;
16
+ margin: 0 auto;
17
+ }
18
+ .example {
19
+ margin: 30px 0;
20
+ padding: 20px;
21
+ border: 1px solid #ddd;
22
+ border-radius: 8px;
23
+ }
24
+ .example h3 {
25
+ margin-top: 0;
26
+ color: #333;
27
+ }
28
+ .example p {
29
+ color: #666;
30
+ margin-bottom: 15px;
31
+ }
32
+ .expected {
33
+ background-color: #f0f8ff;
34
+ padding: 10px;
35
+ border-radius: 4px;
36
+ margin-top: 10px;
37
+ }
38
+ .expected strong {
39
+ color: #006400;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body>
44
+ <h1>Multi-Select Drag and Drop Demo</h1>
45
+ <p>This demo shows the drag and drop reordering functionality for multi-select components.</p>
46
+
47
+ <div class="example">
48
+ <h3>With 3 items (drag and drop enabled)</h3>
49
+ <p>This multi-select has 3 pre-selected items. You should be able to drag and drop to reorder them.</p>
50
+ <temba-select multi searchable id="test3" placeholder="Select colors">
51
+ <temba-option name="Red" value="0" selected></temba-option>
52
+ <temba-option name="Green" value="1" selected></temba-option>
53
+ <temba-option name="Blue" value="2" selected></temba-option>
54
+ </temba-select>
55
+ <div class="expected">
56
+ <strong>Expected behavior:</strong>
57
+ <ul>
58
+ <li>Items should be wrapped in a sortable container</li>
59
+ <li>Drag an item to see a ghost element following the mouse</li>
60
+ <li>Drop on another item to swap their positions</li>
61
+ <li>Drop outside to cancel the operation</li>
62
+ <li>Items should maintain cursor style when hovering</li>
63
+ </ul>
64
+ </div>
65
+ </div>
66
+
67
+ <div class="example">
68
+ <h3>With 2 items (drag and drop enabled)</h3>
69
+ <p>This multi-select has 2 pre-selected items. You should be able to drag and drop to reorder them.</p>
70
+ <temba-select multi id="test2" placeholder="Select fruits">
71
+ <temba-option name="Apple" value="apple" selected></temba-option>
72
+ <temba-option name="Banana" value="banana" selected></temba-option>
73
+ </temba-select>
74
+ <div class="expected">
75
+ <strong>Expected behavior:</strong>
76
+ <ul>
77
+ <li>Same drag and drop functionality as above</li>
78
+ <li>Swapping the two items should work</li>
79
+ </ul>
80
+ </div>
81
+ </div>
82
+
83
+ <div class="example">
84
+ <h3>With 1 item (no drag and drop)</h3>
85
+ <p>This multi-select has only 1 pre-selected item. Drag and drop should not be enabled.</p>
86
+ <temba-select multi id="test1" placeholder="Select an item">
87
+ <temba-option name="Solo" value="solo" selected></temba-option>
88
+ </temba-select>
89
+ <div class="expected">
90
+ <strong>Expected behavior:</strong>
91
+ <ul>
92
+ <li>No sortable container should be present</li>
93
+ <li>Normal multi-select appearance and behavior</li>
94
+ </ul>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="example">
99
+ <h3>Regular single select (no drag and drop)</h3>
100
+ <p>This is a regular single-select. Drag and drop should not be enabled.</p>
101
+ <temba-select id="single">
102
+ <temba-option name="Option 1" value="1" selected></temba-option>
103
+ </temba-select>
104
+ <div class="expected">
105
+ <strong>Expected behavior:</strong>
106
+ <ul>
107
+ <li>Normal single-select appearance and behavior</li>
108
+ <li>No sortable functionality</li>
109
+ </ul>
110
+ </div>
111
+ </div>
112
+
113
+ <script>
114
+ // Add event listeners to monitor changes
115
+ document.querySelectorAll('temba-select[multi]').forEach(select => {
116
+ select.addEventListener('change', () => {
117
+ console.log(`${select.id} values changed:`, select.values);
118
+ });
119
+ });
120
+
121
+ // Log initial state after components load
122
+ window.addEventListener('load', () => {
123
+ setTimeout(() => {
124
+ console.log('=== Initial State ===');
125
+ document.querySelectorAll('temba-select').forEach(select => {
126
+ const sortableList = select.shadowRoot?.querySelector('temba-sortable-list');
127
+ console.log(`${select.id}:`, {
128
+ values: select.values,
129
+ hasSortableList: !!sortableList,
130
+ isMulti: select.hasAttribute('multi')
131
+ });
132
+ });
133
+ }, 500);
134
+ });
135
+ </script>
136
+
137
+ <script type="module">
138
+ import '../out-tsc/temba-modules.js';
139
+ </script>
140
+ </body>
141
+ </html>
package/demo/index.html CHANGED
@@ -372,6 +372,21 @@
372
372
  </temba-select>
373
373
  </div>
374
374
 
375
+ <div class="example">
376
+ <h3>Multi-select with 3 items (Drag and Drop Test)</h3>
377
+ <temba-select
378
+ placeholder="Select colors"
379
+ values='[{"name":"Red","value":"0"},{"name":"Green","value":"1"},{"name":"Blue","value":"2"}]'
380
+ multi
381
+ >
382
+ <temba-option name="Red" value="0"></temba-option>
383
+ <temba-option name="Green" value="1"></temba-option>
384
+ <temba-option name="Blue" value="2"></temba-option>
385
+ <temba-option name="Yellow" value="3"></temba-option>
386
+ <temba-option name="Purple" value="4"></temba-option>
387
+ </temba-select>
388
+ </div>
389
+
375
390
  <div class="example">
376
391
  <script>
377
392
  function toggleSelect(evt) {
package/demo/test-drag-drop.html ADDED
@@ -0,0 +1,94 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Test Drag and Drop</title>
6
+ <link href="/static/css/temba-components.css" rel="stylesheet" type="text/css" />
7
+ <style>
8
+ body {
9
+ font-family: sans-serif;
10
+ padding: 20px;
11
+ max-width: 600px;
12
+ margin: 0 auto;
13
+ }
14
+ .test-container {
15
+ margin: 20px 0;
16
+ padding: 20px;
17
+ border: 1px solid #ddd;
18
+ border-radius: 8px;
19
+ }
20
+ .test-container h3 {
21
+ margin-top: 0;
22
+ color: #333;
23
+ }
24
+ </style>
25
+ </head>
26
+ <body>
27
+ <h1>Drag and Drop Test</h1>
28
+
29
+ <div class="test-container">
30
+ <h3>Multi-select with 3 items (should have horizontal layout and drag/drop)</h3>
31
+ <temba-select multi id="test3">
32
+ <temba-option name="Red" value="0" selected></temba-option>
33
+ <temba-option name="Green" value="1" selected></temba-option>
34
+ <temba-option name="Blue" value="2" selected></temba-option>
35
+ </temba-select>
36
+ <div style="margin-top: 10px;">
37
+ Current values: <span id="values3"></span>
38
+ </div>
39
+ </div>
40
+
41
+ <div class="test-container">
42
+ <h3>Multi-select with 2 items (should have drag/drop)</h3>
43
+ <temba-select multi id="test2">
44
+ <temba-option name="Apple" value="apple" selected></temba-option>
45
+ <temba-option name="Banana" value="banana" selected></temba-option>
46
+ </temba-select>
47
+ <div style="margin-top: 10px;">
48
+ Current values: <span id="values2"></span>
49
+ </div>
50
+ </div>
51
+
52
+ <div class="test-container">
53
+ <h3>Multi-select with 1 item (should NOT have drag/drop)</h3>
54
+ <temba-select multi id="test1">
55
+ <temba-option name="Solo" value="solo" selected></temba-option>
56
+ </temba-select>
57
+ <div style="margin-top: 10px;">
58
+ Current values: <span id="values1"></span>
59
+ </div>
60
+ </div>
61
+
62
+ <script type="module">
63
+ import '/out-tsc/temba-modules.js';
64
+
65
+ function updateValues() {
66
+ const test3 = document.getElementById('test3');
67
+ const test2 = document.getElementById('test2');
68
+ const test1 = document.getElementById('test1');
69
+
70
+ document.getElementById('values3').textContent = test3.values.map(v => v.name).join(', ');
71
+ document.getElementById('values2').textContent = test2.values.map(v => v.name).join(', ');
72
+ document.getElementById('values1').textContent = test1.values.map(v => v.name).join(', ');
73
+ }
74
+
75
+ window.addEventListener('load', () => {
76
+ setTimeout(() => {
77
+ updateValues();
78
+
79
+ // Add change listeners
80
+ document.querySelectorAll('temba-select').forEach(select => {
81
+ select.addEventListener('change', updateValues);
82
+ });
83
+
84
+ // Check if sortable lists exist
85
+ console.log('=== Sortable List Check ===');
86
+ document.querySelectorAll('temba-select').forEach(select => {
87
+ const sortableList = select.shadowRoot?.querySelector('temba-sortable-list');
88
+ console.log(`${select.id}: has sortable list = ${!!sortableList}, horizontal = ${sortableList?.horizontal}`);
89
+ });
90
+ }, 500);
91
+ });
92
+ </script>
93
+ </body>
94
+ </html>