termcast 1.3.19 → 1.3.24

package/src/examples/form-dropdown.vitest.tsx

@@ -39,9 +39,9 @@ test('form dropdown shows inline options', async () => {
 
 
     ■  Dropdown Component Demo
-    ┃  Test dropdown with sections, multiple selection, and more
-    ┃  features
-    ┃
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
     ◇  Programming Languages
     │  TypeScript, Rust
     │
@@ -50,7 +50,6 @@ test('form dropdown shows inline options', async () => {
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
     │
@@ -61,7 +60,7 @@ test('form dropdown shows inline options', async () => {
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
-    │  ↑↓ to see more options
+    │  ○ GitHub Light
     │
     │  Select your preferred editor color theme
     │
@@ -72,14 +71,15 @@ test('form dropdown shows inline options', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
-    └
 
+    │
+    └
 
 
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('space')
@@ -94,9 +94,9 @@ test('form dropdown shows inline options', async () => {
 
 
     ■  Dropdown Component Demo
-    ┃  Test dropdown with sections, multiple selection, and more
-    ┃  features
-    ┃
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
     ◇  Programming Languages
     │  TypeScript, Rust
     │
@@ -105,7 +105,6 @@ test('form dropdown shows inline options', async () => {
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
     │
@@ -116,7 +115,7 @@ test('form dropdown shows inline options', async () => {
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
-    │  ↑↓ to see more options
+    │  ○ GitHub Light
     │
     │  Select your preferred editor color theme
     │
@@ -127,14 +126,15 @@ test('form dropdown shows inline options', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
-    └
 
+    │
+    └
 
 
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('down')
@@ -149,9 +149,9 @@ test('form dropdown shows inline options', async () => {
 
 
     ■  Dropdown Component Demo
-    ┃  Test dropdown with sections, multiple selection, and more
-    ┃  features
-    ┃
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
     ◇  Programming Languages
     │  TypeScript, Rust
     │
@@ -160,7 +160,6 @@ test('form dropdown shows inline options', async () => {
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
     │
@@ -171,7 +170,7 @@ test('form dropdown shows inline options', async () => {
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
-    │  ↑↓ to see more options
+    │  ○ GitHub Light
     │
     │  Select your preferred editor color theme
     │
@@ -182,14 +181,15 @@ test('form dropdown shows inline options', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
-    └
 
+    │
+    └
 
 
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('down')
@@ -207,9 +207,9 @@ test('form dropdown shows inline options', async () => {
 
 
     ■  Dropdown Component Demo
-    ┃  Test dropdown with sections, multiple selection, and more
-    ┃  features
-    ┃
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
     ◇  Programming Languages
     │  TypeScript, Rust
     │
@@ -218,7 +218,6 @@ test('form dropdown shows inline options', async () => {
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
     │
@@ -229,7 +228,7 @@ test('form dropdown shows inline options', async () => {
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
-    │  ↑↓ to see more options
+    │  ○ GitHub Light
     │
     │  Select your preferred editor color theme
     │
@@ -240,14 +239,15 @@ test('form dropdown shows inline options', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
-    └
 
+    │
+    └
 
 
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('enter')
@@ -262,9 +262,9 @@ test('form dropdown shows inline options', async () => {
 
 
     ■  Dropdown Component Demo
-    ┃  Test dropdown with sections, multiple selection, and more
-    ┃  features
-    ┃
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
     ◇  Programming Languages
     │  TypeScript, Rust
     │
@@ -273,7 +273,6 @@ test('form dropdown shows inline options', async () => {
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
     │
@@ -284,7 +283,7 @@ test('form dropdown shows inline options', async () => {
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
-    │  ↑↓ to see more options
+    │  ○ GitHub Light
     │
     │  Select your preferred editor color theme
     │
@@ -295,14 +294,15 @@ test('form dropdown shows inline options', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
-    └
 
+    │
+    └
 
 
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 }, 10000)
 
@@ -325,9 +325,9 @@ test('form dropdown keyboard navigation', async () => {
 
 
     ■  Dropdown Component Demo
-    ┃  Test dropdown with sections, multiple selection, and more
-    ┃  features
-    ┃
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
     ◇  Programming Languages
     │  TypeScript, Rust
     │
@@ -336,7 +336,6 @@ test('form dropdown keyboard navigation', async () => {
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
     │
@@ -347,7 +346,7 @@ test('form dropdown keyboard navigation', async () => {
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
-    │  ↑↓ to see more options
+    │  ○ GitHub Light
     │
     │  Select your preferred editor color theme
     │
@@ -358,14 +357,15 @@ test('form dropdown keyboard navigation', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
-    └
 
+    │
+    └
 
 
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('down')
@@ -383,9 +383,9 @@ test('form dropdown keyboard navigation', async () => {
 
 
     ■  Dropdown Component Demo
-    ┃  Test dropdown with sections, multiple selection, and more
-    ┃  features
-    ┃
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
     ◇  Programming Languages
     │  TypeScript, Rust
     │
@@ -394,7 +394,6 @@ test('form dropdown keyboard navigation', async () => {
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
     │
@@ -405,7 +404,7 @@ test('form dropdown keyboard navigation', async () => {
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
-    │  ↑↓ to see more options
+    │  ○ GitHub Light
     │
     │  Select your preferred editor color theme
     │
@@ -416,14 +415,15 @@ test('form dropdown keyboard navigation', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
-    └
 
+    │
+    └
 
 
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('down')
@@ -438,9 +438,9 @@ test('form dropdown keyboard navigation', async () => {
 
 
     ■  Dropdown Component Demo
-    ┃  Test dropdown with sections, multiple selection, and more
-    ┃  features
-    ┃
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
     ◇  Programming Languages
     │  TypeScript, Rust
     │
@@ -449,7 +449,6 @@ test('form dropdown keyboard navigation', async () => {
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
     │
@@ -460,7 +459,7 @@ test('form dropdown keyboard navigation', async () => {
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
-    │  ↑↓ to see more options
+    │  ○ GitHub Light
     │
     │  Select your preferred editor color theme
     │
@@ -471,14 +470,15 @@ test('form dropdown keyboard navigation', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
-    └
 
+    │
+    └
 
 
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('up')
@@ -493,9 +493,9 @@ test('form dropdown keyboard navigation', async () => {
 
 
     ■  Dropdown Component Demo
-    ┃  Test dropdown with sections, multiple selection, and more
-    ┃  features
-    ┃
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
     ◇  Programming Languages
     │  TypeScript, Rust
     │
@@ -504,7 +504,6 @@ test('form dropdown keyboard navigation', async () => {
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
     │
@@ -515,7 +514,7 @@ test('form dropdown keyboard navigation', async () => {
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
-    │  ↑↓ to see more options
+    │  ○ GitHub Light
     │
     │  Select your preferred editor color theme
     │
@@ -526,14 +525,15 @@ test('form dropdown keyboard navigation', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
-    └
 
+    │
+    └
 
 
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('esc')
@@ -548,9 +548,9 @@ test('form dropdown keyboard navigation', async () => {
 
 
     ■  Dropdown Component Demo
-    ┃  Test dropdown with sections, multiple selection, and more
-    ┃  features
-    ┃
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
     ◇  Programming Languages
     │  TypeScript, Rust
     │
@@ -559,7 +559,6 @@ test('form dropdown keyboard navigation', async () => {
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
     │
@@ -570,7 +569,7 @@ test('form dropdown keyboard navigation', async () => {
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
-    │  ↑↓ to see more options
+    │  ○ GitHub Light
     │
     │  Select your preferred editor color theme
     │
@@ -581,14 +580,15 @@ test('form dropdown keyboard navigation', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
-    └
 
+    │
+    └
 
 
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 }, 10000)
 
@@ -615,17 +615,16 @@ test('form dropdown with default value', async () => {
     │  features
     │
     ◆  Programming Languages
-    ┃  TypeScript, Rust
-    ┃
-    ┃  Frontend
-    ┃› ● TypeScript
-    ┃  ○ JavaScript
-    ┃  ○ React
-    ┃  ○ Vue
-    ┃  ↑↓ to see more options
-    ┃
-    ┃  Choose your preferred programming languages
-    ┃
+    │  TypeScript, Rust
+    │
+    │  Frontend
+    │› ● TypeScript
+    │  ○ JavaScript
+    │  ○ React
+    │  ○ Vue
+    │
+    │  Choose your preferred programming languages
+    │
     ◇  Editor Theme
     │  Dracula
     │
@@ -633,7 +632,7 @@ test('form dropdown with default value', async () => {
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
-    │  ↑↓ to see more options
+    │  ○ GitHub Light
     │
     │  Select your preferred editor color theme
     │
@@ -644,14 +643,15 @@ test('form dropdown with default value', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
-    └
 
+    │
+    └
 
 
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('space')
@@ -670,17 +670,16 @@ test('form dropdown with default value', async () => {
     │  features
     │
     ◆  Programming Languages
-    ┃  Rust
-    ┃
-    ┃  Frontend
-    ┃› ○ TypeScript
-    ┃  ○ JavaScript
-    ┃  ○ React
-    ┃  ○ Vue
-    ┃  ↑↓ to see more options
-    ┃
-    ┃  Choose your preferred programming languages
-    ┃
+    │  Rust
+    │
+    │  Frontend
+    │› ○ TypeScript
+    │  ○ JavaScript
+    │  ○ React
+    │  ○ Vue
+    │
+    │  Choose your preferred programming languages
+    │
     ◇  Editor Theme
     │  Dracula
     │
@@ -688,7 +687,7 @@ test('form dropdown with default value', async () => {
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
-    │  ↑↓ to see more options
+    │  ○ GitHub Light
     │
     │  Select your preferred editor color theme
     │
@@ -699,14 +698,15 @@ test('form dropdown with default value', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
-    └
 
+    │
+    └
 
 
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('esc')
@@ -726,17 +726,16 @@ test('form dropdown with default value', async () => {
     │  features                                                      █
     │                                                                █
     ◆  Programming Languages                                         █
-    ┃  Rust, TypeScript                                              █
-    ┃                                                                █
-    ┃  Frontend                                                      █
-    ┃› ● TypeScript                                                  █
-    ┃  ○ JavaScript                                                  █
-    ┃  ○ React                                                       █
-    ┃  ○ Vue                                                         █
-    ┃  ↑↓ to see more options                                        █
-    ┃                                                                █
-    ┃  Choose your preferred programming languages
-    ┃
+    │  Rust, TypeScript                                              █
+    │                                                                █
+    │  Frontend                                                      █
+    │› ● TypeScript                                                  █
+    │  ○ JavaScript                                                  █
+    │  ○ React                                                       ▀
+    │  ○ Vue
+    │
+    │  Choose your preferred programming languages
+    │
     ◇  Editor Theme
     │  Dracula
     │
@@ -744,7 +743,7 @@ test('form dropdown with default value', async () => {
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
-    │  ↑↓ to see more options
+    │  ○ GitHub Light
     │
     │  Select your preferred editor color theme
     │
@@ -755,6 +754,8 @@ test('form dropdown with default value', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
+
+    │
     ▪  Submitted Data
     │  {
     │    "languages": [
@@ -763,10 +764,9 @@ test('form dropdown with default value', async () => {
     │    ],
     │    "theme": "dracula",
     │    "priority": ""
-    │  }
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 }, 10000)
 
@@ -790,9 +790,9 @@ test('selecting second-to-last visible item should not scroll', async () => {
 
 
     ■  Dropdown Component Demo
-    ┃  Test dropdown with sections, multiple selection, and more
-    ┃  features
-    ┃
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
     ◇  Programming Languages
     │  TypeScript, Rust
     │
@@ -801,7 +801,6 @@ test('selecting second-to-last visible item should not scroll', async () => {
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
     │
@@ -812,7 +811,7 @@ test('selecting second-to-last visible item should not scroll', async () => {
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
-    │  ↑↓ to see more options
+    │  ○ GitHub Light
     │
     │  Select your preferred editor color theme
     │
@@ -823,14 +822,15 @@ test('selecting second-to-last visible item should not scroll', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
-    └
 
+    │
+    └
 
 
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('enter')
@@ -845,9 +845,9 @@ test('selecting second-to-last visible item should not scroll', async () => {
 
 
     ■  Dropdown Component Demo
-    ┃  Test dropdown with sections, multiple selection, and more
-    ┃  features
-    ┃
+    │  Test dropdown with sections, multiple selection, and more
+    │  features
+    │
     ◇  Programming Languages
     │  TypeScript, Rust
     │
@@ -856,7 +856,6 @@ test('selecting second-to-last visible item should not scroll', async () => {
     │  ○ JavaScript
     │  ○ React
     │  ○ Vue
-    │  ↑↓ to see more options
     │
     │  Choose your preferred programming languages
     │
@@ -867,7 +866,7 @@ test('selecting second-to-last visible item should not scroll', async () => {
     │  ● Dracula
     │  ○ One Dark
     │  ○ Nord
-    │  ↑↓ to see more options
+    │  ○ GitHub Light
     │
     │  Select your preferred editor color theme
     │
@@ -878,13 +877,14 @@ test('selecting second-to-last visible item should not scroll', async () => {
     │  ○ High
     │  ○ Medium
     │  ○ Low
-    └
 
+    │
+    └
 
 
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 }, 10000)