termcast 1.3.30 → 1.3.32

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

@@ -33,38 +33,39 @@ test('form tagpicker shows inline options', async () => {
 
 
 
+      ■  TagPicker Component Demo
+      │  Test tag picker with multiple selection support
+      │
+      ◇  Favorite Sport
+      │  Choose your favorite sport...
+      │
+      │  ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
+      │  ○ Baseball
+      │  ○ Golf
+      │
+      │  Select your favorite sport from the list
+      │
+      ◇  Country
+      │  Germany
+      │
+      │  ● Germany
+      │  ○ India
+      │  ○ Netherlands
+      │  ○ Norway
+      │  ○ Poland
+      │
+      └
 
 
+       ctrl ↵ submit   tab navigate   ^k actions
 
 
 
 
 
 
-    ■  TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◇  Favorite Sport
-    │  Choose your favorite sport...
-    │
-    │  ○ Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ○ Golf
-    │
-    │  Select your favorite sport from the list
-    │
-    ◇  Country
-    │  Germany
-    │
-    │  ● Germany
-    │  ○ India
-    │  ○ Netherlands
-    │  ○ Norway
-    │  ○ Poland
-    │
-    └
 
 
 
@@ -76,7 +77,8 @@ test('form tagpicker shows inline options', async () => {
 
 
 
-     ctrl ↵ submit   tab navigate   ^k actions"
+
+    "
   `)
 
   await session.press('space')
@@ -88,38 +90,39 @@ test('form tagpicker shows inline options', async () => {
 
 
 
+      ■  TagPicker Component Demo
+      │  Test tag picker with multiple selection support
+      │
+      ◇  Favorite Sport
+      │  Choose your favorite sport...
+      │
+      │  ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
+      │  ○ Baseball
+      │  ○ Golf
+      │
+      │  Select your favorite sport from the list
+      │
+      ◇  Country
+      │  Germany
+      │
+      │  ● Germany
+      │  ○ India
+      │  ○ Netherlands
+      │  ○ Norway
+      │  ○ Poland
+      │
+      └
 
 
+       ctrl ↵ submit   tab navigate   ^k actions
 
 
 
 
 
 
-    ■  TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◇  Favorite Sport
-    │  Choose your favorite sport...
-    │
-    │  ○ Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ○ Golf
-    │
-    │  Select your favorite sport from the list
-    │
-    ◇  Country
-    │  Germany
-    │
-    │  ● Germany
-    │  ○ India
-    │  ○ Netherlands
-    │  ○ Norway
-    │  ○ Poland
-    │
-    └
 
 
 
@@ -131,7 +134,8 @@ test('form tagpicker shows inline options', async () => {
 
 
 
-     ctrl ↵ submit   tab navigate   ^k actions"
+
+    "
   `)
 
   await session.press('down')
@@ -143,38 +147,39 @@ test('form tagpicker shows inline options', async () => {
 
 
 
+      ■  TagPicker Component Demo
+      │  Test tag picker with multiple selection support
+      │
+      ◇  Favorite Sport
+      │  Choose your favorite sport...
+      │
+      │  ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
+      │  ○ Baseball
+      │  ○ Golf
+      │
+      │  Select your favorite sport from the list
+      │
+      ◇  Country
+      │  Germany
+      │
+      │  ● Germany
+      │  ○ India
+      │  ○ Netherlands
+      │  ○ Norway
+      │  ○ Poland
+      │
+      └
 
 
+       ctrl ↵ submit   tab navigate   ^k actions
 
 
 
 
 
 
-    ■  TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◇  Favorite Sport
-    │  Choose your favorite sport...
-    │
-    │  ○ Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ○ Golf
-    │
-    │  Select your favorite sport from the list
-    │
-    ◇  Country
-    │  Germany
-    │
-    │  ● Germany
-    │  ○ India
-    │  ○ Netherlands
-    │  ○ Norway
-    │  ○ Poland
-    │
-    └
 
 
 
@@ -186,7 +191,8 @@ test('form tagpicker shows inline options', async () => {
 
 
 
-     ctrl ↵ submit   tab navigate   ^k actions"
+
+    "
   `)
 
   await session.press('down')
@@ -201,7 +207,33 @@ test('form tagpicker shows inline options', async () => {
 
 
 
+      ■  TagPicker Component Demo
+      │  Test tag picker with multiple selection support
+      │
+      ◇  Favorite Sport
+      │  Choose your favorite sport...
+      │
+      │  ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
+      │  ○ Baseball
+      │  ○ Golf
+      │
+      │  Select your favorite sport from the list
+      │
+      ◇  Country
+      │  Germany
+      │
+      │  ● Germany
+      │  ○ India
+      │  ○ Netherlands
+      │  ○ Norway
+      │  ○ Poland
+      │
+      └
+
 
+       ctrl ↵ submit   tab navigate   ^k actions
 
 
 
@@ -209,30 +241,6 @@ test('form tagpicker shows inline options', async () => {
 
 
 
-    ■  TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◇  Favorite Sport
-    │  Choose your favorite sport...
-    │
-    │  ○ Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ○ Golf
-    │
-    │  Select your favorite sport from the list
-    │
-    ◇  Country
-    │  Germany
-    │
-    │  ● Germany
-    │  ○ India
-    │  ○ Netherlands
-    │  ○ Norway
-    │  ○ Poland
-    │
-    └
 
 
 
@@ -244,7 +252,7 @@ test('form tagpicker shows inline options', async () => {
 
 
 
-     ctrl ↵ submit   tab navigate   ^k actions"
+    "
   `)
 
   await session.press('enter')
@@ -256,7 +264,33 @@ test('form tagpicker shows inline options', async () => {
 
 
 
+      ■  TagPicker Component Demo
+      │  Test tag picker with multiple selection support
+      │
+      ◇  Favorite Sport
+      │  Choose your favorite sport...
+      │
+      │  ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
+      │  ○ Baseball
+      │  ○ Golf
+      │
+      │  Select your favorite sport from the list
+      │
+      ◇  Country
+      │  Germany
+      │
+      │  ● Germany
+      │  ○ India
+      │  ○ Netherlands
+      │  ○ Norway
+      │  ○ Poland
+      │
+      └
+
 
+       ctrl ↵ submit   tab navigate   ^k actions
 
 
 
@@ -264,30 +298,6 @@ test('form tagpicker shows inline options', async () => {
 
 
 
-    ■  TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◇  Favorite Sport
-    │  Choose your favorite sport...
-    │
-    │  ○ Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ○ Golf
-    │
-    │  Select your favorite sport from the list
-    │
-    ◇  Country
-    │  Germany
-    │
-    │  ● Germany
-    │  ○ India
-    │  ○ Netherlands
-    │  ○ Norway
-    │  ○ Poland
-    │
-    └
 
 
 
@@ -299,7 +309,7 @@ test('form tagpicker shows inline options', async () => {
 
 
 
-     ctrl ↵ submit   tab navigate   ^k actions"
+    "
   `)
 }, 15000)
 
@@ -319,7 +329,33 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
+      ■  TagPicker Component Demo
+      │  Test tag picker with multiple selection support
+      │
+      ◇  Favorite Sport
+      │  Choose your favorite sport...
+      │
+      │  ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
+      │  ○ Baseball
+      │  ○ Golf
+      │
+      │  Select your favorite sport from the list
+      │
+      ◇  Country
+      │  Germany
+      │
+      │  ● Germany
+      │  ○ India
+      │  ○ Netherlands
+      │  ○ Norway
+      │  ○ Poland
+      │
+      └
+
 
+       ctrl ↵ submit   tab navigate   ^k actions
 
 
 
@@ -327,30 +363,6 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-    ■  TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◇  Favorite Sport
-    │  Choose your favorite sport...
-    │
-    │  ○ Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ○ Golf
-    │
-    │  Select your favorite sport from the list
-    │
-    ◇  Country
-    │  Germany
-    │
-    │  ● Germany
-    │  ○ India
-    │  ○ Netherlands
-    │  ○ Norway
-    │  ○ Poland
-    │
-    └
 
 
 
@@ -362,7 +374,7 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-     ctrl ↵ submit   tab navigate   ^k actions"
+    "
   `)
 
   await session.press('down')
@@ -377,7 +389,33 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
+      ■  TagPicker Component Demo
+      │  Test tag picker with multiple selection support
+      │
+      ◇  Favorite Sport
+      │  Choose your favorite sport...
+      │
+      │  ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
+      │  ○ Baseball
+      │  ○ Golf
+      │
+      │  Select your favorite sport from the list
+      │
+      ◇  Country
+      │  Germany
+      │
+      │  ● Germany
+      │  ○ India
+      │  ○ Netherlands
+      │  ○ Norway
+      │  ○ Poland
+      │
+      └
+
 
+       ctrl ↵ submit   tab navigate   ^k actions
 
 
 
@@ -385,30 +423,6 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-    ■  TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◇  Favorite Sport
-    │  Choose your favorite sport...
-    │
-    │  ○ Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ○ Golf
-    │
-    │  Select your favorite sport from the list
-    │
-    ◇  Country
-    │  Germany
-    │
-    │  ● Germany
-    │  ○ India
-    │  ○ Netherlands
-    │  ○ Norway
-    │  ○ Poland
-    │
-    └
 
 
 
@@ -420,7 +434,7 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-     ctrl ↵ submit   tab navigate   ^k actions"
+    "
   `)
 
   await session.press('down')
@@ -432,38 +446,39 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
+      ■  TagPicker Component Demo
+      │  Test tag picker with multiple selection support
+      │
+      ◇  Favorite Sport
+      │  Choose your favorite sport...
+      │
+      │  ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
+      │  ○ Baseball
+      │  ○ Golf
+      │
+      │  Select your favorite sport from the list
+      │
+      ◇  Country
+      │  Germany
+      │
+      │  ● Germany
+      │  ○ India
+      │  ○ Netherlands
+      │  ○ Norway
+      │  ○ Poland
+      │
+      └
 
 
+       ctrl ↵ submit   tab navigate   ^k actions
 
 
 
 
 
 
-    ■  TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◇  Favorite Sport
-    │  Choose your favorite sport...
-    │
-    │  ○ Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ○ Golf
-    │
-    │  Select your favorite sport from the list
-    │
-    ◇  Country
-    │  Germany
-    │
-    │  ● Germany
-    │  ○ India
-    │  ○ Netherlands
-    │  ○ Norway
-    │  ○ Poland
-    │
-    └
 
 
 
@@ -475,7 +490,8 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-     ctrl ↵ submit   tab navigate   ^k actions"
+
+    "
   `)
 
   await session.press('up')
@@ -487,38 +503,39 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
+      ■  TagPicker Component Demo
+      │  Test tag picker with multiple selection support
+      │
+      ◇  Favorite Sport
+      │  Choose your favorite sport...
+      │
+      │  ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
+      │  ○ Baseball
+      │  ○ Golf
+      │
+      │  Select your favorite sport from the list
+      │
+      ◇  Country
+      │  Germany
+      │
+      │  ● Germany
+      │  ○ India
+      │  ○ Netherlands
+      │  ○ Norway
+      │  ○ Poland
+      │
+      └
 
 
+       ctrl ↵ submit   tab navigate   ^k actions
 
 
 
 
 
 
-    ■  TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◇  Favorite Sport
-    │  Choose your favorite sport...
-    │
-    │  ○ Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ○ Golf
-    │
-    │  Select your favorite sport from the list
-    │
-    ◇  Country
-    │  Germany
-    │
-    │  ● Germany
-    │  ○ India
-    │  ○ Netherlands
-    │  ○ Norway
-    │  ○ Poland
-    │
-    └
 
 
 
@@ -530,19 +547,46 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-     ctrl ↵ submit   tab navigate   ^k actions"
-  `)
 
-  await session.press('esc')
+    "
+  `)
 
-  const afterEscapeSnapshot = await session.text()
-  expect(afterEscapeSnapshot).toMatchInlineSnapshot(`
+  // Note: not pressing escape here since that would exit the app at root level
+  // The inline tagpicker doesn't need escape to close - it stays visible
+  const afterNavigationSnapshot = await session.text()
+  expect(afterNavigationSnapshot).toMatchInlineSnapshot(`
     "
 
 
 
 
+      ■  TagPicker Component Demo
+      │  Test tag picker with multiple selection support
+      │
+      ◇  Favorite Sport
+      │  Choose your favorite sport...
+      │
+      │  ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
+      │  ○ Baseball
+      │  ○ Golf
+      │
+      │  Select your favorite sport from the list
+      │
+      ◇  Country
+      │  Germany
+      │
+      │  ● Germany
+      │  ○ India
+      │  ○ Netherlands
+      │  ○ Norway
+      │  ○ Poland
+      │
+      └
+
 
+       ctrl ↵ submit   tab navigate   ^k actions
 
 
 
@@ -550,30 +594,6 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-    ■  TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◇  Favorite Sport
-    │  Choose your favorite sport...
-    │
-    │  ○ Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ○ Golf
-    │
-    │  Select your favorite sport from the list
-    │
-    ◇  Country
-    │  Germany
-    │
-    │  ● Germany
-    │  ○ India
-    │  ○ Netherlands
-    │  ○ Norway
-    │  ○ Poland
-    │
-    └
 
 
 
@@ -585,7 +605,7 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-     ctrl ↵ submit   tab navigate   ^k actions"
+    "
   `)
 }, 15000)
 
@@ -605,38 +625,39 @@ test('form tagpicker with default value', async () => {
 
 
 
+      ▪  TagPicker Component Demo
+      │  Test tag picker with multiple selection support
+      │
+      ◆  Favorite Sport
+      │  Choose your favorite sport...
+      │
+      │› ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
+      │  ○ Baseball
+      │  ○ Golf
+      │
+      │  Select your favorite sport from the list
+      │
+      ◇  Country
+      │  Germany
+      │
+      │  ● Germany
+      │  ○ India
+      │  ○ Netherlands
+      │  ○ Norway
+      │  ○ Poland
+      │
+      └
 
 
+       ctrl ↵ submit   tab navigate   ^k actions
 
 
 
 
 
 
-    ▪  TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◆  Favorite Sport
-    │  Choose your favorite sport...
-    │
-    │› ○ Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ○ Golf
-    │
-    │  Select your favorite sport from the list
-    │
-    ◇  Country
-    │  Germany
-    │
-    │  ● Germany
-    │  ○ India
-    │  ○ Netherlands
-    │  ○ Norway
-    │  ○ Poland
-    │
-    └
 
 
 
@@ -648,7 +669,8 @@ test('form tagpicker with default value', async () => {
 
 
 
-     ctrl ↵ submit   tab navigate   ^k actions"
+
+    "
   `)
 
   await session.press('space')
@@ -660,7 +682,33 @@ test('form tagpicker with default value', async () => {
 
 
 
+      ▪  TagPicker Component Demo
+      │  Test tag picker with multiple selection support
+      │
+      ◆  Favorite Sport
+      │  Basketball
+      │
+      │› ● Basketball
+      │  ○ Football
+      │  ○ Tennis
+      │  ○ Baseball
+      │  ○ Golf
+      │
+      │  Select your favorite sport from the list
+      │
+      ◇  Country
+      │  Germany
+      │
+      │  ● Germany
+      │  ○ India
+      │  ○ Netherlands
+      │  ○ Norway
+      │  ○ Poland
+      │
+      └
+
 
+       ctrl ↵ submit   tab navigate   ^k actions
 
 
 
@@ -668,30 +716,6 @@ test('form tagpicker with default value', async () => {
 
 
 
-    ▪  TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◆  Favorite Sport
-    │  Basketball
-    │
-    │› ● Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ○ Golf
-    │
-    │  Select your favorite sport from the list
-    │
-    ◇  Country
-    │  Germany
-    │
-    │  ● Germany
-    │  ○ India
-    │  ○ Netherlands
-    │  ○ Norway
-    │  ○ Poland
-    │
-    └
 
 
 
@@ -703,10 +727,10 @@ test('form tagpicker with default value', async () => {
 
 
 
-     ctrl ↵ submit   tab navigate   ^k actions"
+    "
   `)
 
-  await session.press('esc')
+  // Submit with alt+enter directly - no need to press esc first
   await session.press(['alt', 'enter'])
 
   const afterSubmitSnapshot = await session.text({
@@ -720,42 +744,44 @@ test('form tagpicker with default value', async () => {
 
 
 
+      ▪  TagPicker Component Demo
+      │  Test tag picker with multiple selection support
+      │
+      ◆  Favorite Sport
+      │  Choose your favorite sport...
+      │
+      │› ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
+      │  ○ Baseball
+      │  ○ Golf
+      │
+      │  Select your favorite sport from the list
+      │
+      ◇  Country
+      │  Germany
+      │
+      │  ● Germany
+      │  ○ India
+      │  ○ Netherlands
+      │  ○ Norway
+      │  ○ Poland
+      │
+      ▪  Submitted Data
+      │  {
+      │    "sports": [],
+      │    "countries": [
+      │      "ger"
+      │    ]
+      │  }
+      │
+      └
+
 
+       ctrl ↵ submit   tab navigate   ^k actions
 
 
 
-    ▪  TagPicker Component Demo
-    │  Test tag picker with multiple selection support
-    │
-    ◆  Favorite Sport
-    │  Choose your favorite sport...
-    │
-    │› ○ Basketball
-    │  ○ Football
-    │  ○ Tennis
-    │  ○ Baseball
-    │  ○ Golf
-    │
-    │  Select your favorite sport from the list
-    │
-    ◇  Country
-    │  Germany
-    │
-    │  ● Germany
-    │  ○ India
-    │  ○ Netherlands
-    │  ○ Norway
-    │  ○ Poland
-    │
-    ▪  Submitted Data
-    │  {
-    │    "sports": [],
-    │    "countries": [
-    │      "ger"
-    │    ]
-    │  }
-    │
-    └
 
 
 
@@ -763,6 +789,6 @@ test('form tagpicker with default value', async () => {
 
 
 
-     ctrl ↵ submit   tab navigate   ^k actions"
+    "
   `)
 }, 15000)