termcast 1.3.19 → 1.3.24

package/src/examples/list-with-sections.tsx

@@ -14,6 +14,7 @@ function SimpleListExample() {
   const { push } = useNavigation()
   return (
     <List
+      // isLoading
       navigationTitle='Simple List Example'
       searchBarPlaceholder='Search items...'
       onSelectionChange={(id) => {

package/src/examples/list-with-sections.vitest.tsx

@@ -1,4 +1,5 @@
 import { test, expect, afterEach, beforeEach } from 'vitest'
+
 import { launchTerminal, Session } from 'tuistory/src'
 
 let session: Session
@@ -44,9 +45,12 @@ test('list with sections navigation', async () => {
                                                                      ▼
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+     ↵ view details  ↑↓ navigate  ^k actions"
   `)
 
+  // Verify first action title is shown in footer when item has actions (Apple has "View Details")
+  expect(initialSnapshot.toLowerCase()).toContain('↵ view details')
+
   // Add small delay to ensure all items have registered
   await new Promise((resolve) => setTimeout(resolve, 100))
 
@@ -72,7 +76,7 @@ test('list with sections navigation', async () => {
                                                                      ▼
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+     ↵ view details  ↑↓ navigate  ^k actions"
   `)
 
   await session.press('down')
@@ -97,9 +101,12 @@ test('list with sections navigation', async () => {
                                                                      ▼
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 
+  // Verify footer doesn't show action when item has no actions (Orange has no actions)
+  expect(secondDownSnapshot.toLowerCase()).not.toContain('↵ view details')
+
   await session.press('enter')
 
   const afterEnterSnapshot = await session.text()
@@ -122,7 +129,7 @@ test('list with sections navigation', async () => {
                                                                      ▼
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 
   // Go back to list with Escape
@@ -148,7 +155,7 @@ test('list with sections navigation', async () => {
                                                                      ▼
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 })
 
@@ -172,11 +179,11 @@ test('list with sections search functionality', async () => {
     "
 
 
-    Simple List Example ────────────────────────────────────────────
+     Simple List Example ────────────────────────────────────────────
 
-    ban
+     ban
 
-    Banana Yellow and nutritious                               Ripe
+    ›Banana Yellow and nutritious                               Ripe
 
 
 
@@ -187,7 +194,7 @@ test('list with sections search functionality', async () => {
 
 
 
-    ↵ select  ↑↓ navigate  ^k actions"
+     ↵ view details  ↑↓ navigate  ^k actions"
   `)
 
   // Clear search and type "let" to search for Lettuce
@@ -210,7 +217,6 @@ test('list with sections search functionality', async () => {
 
     let
 
-
     Lettuce Green and fresh
 
 
@@ -221,7 +227,8 @@ test('list with sections search functionality', async () => {
 
 
 
-    ↵ select  ↑↓ navigate  ^k actions"
+
+    ↵ view details  ↑↓ navigate  ^k actions"
   `)
 
   // Clear search to show all items again
@@ -249,7 +256,7 @@ test('list with sections search functionality', async () => {
                                                                      ▼
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+     ↵ view details  ↑↓ navigate  ^k actions"
   `)
 
   // Search for "bread"
@@ -269,9 +276,9 @@ test('list with sections search functionality', async () => {
 
     bread
 
+    Bread Freshly baked                                 Today [New]
 
 
-    Bread Freshly baked                                 Today [New]
 
 
 
@@ -280,7 +287,7 @@ test('list with sections search functionality', async () => {
 
 
 
-    ↵ select  ↑↓ navigate  ^k actions"
+    ↵ view details  ↑↓ navigate  ^k actions"
   `)
 
   // Select the bread item
@@ -291,24 +298,22 @@ test('list with sections search functionality', async () => {
     "
 
 
-      Simple List Example ────────────────────────────────────────────
-
-      bread
-
-    ┃                                                                  ┃
-    ┃                                                            esc   ┃
-    ┃                                                                  ┃
-    ┃   Search actions...                                              ┃
-    ┃                                                                  ┃
-    ┃  ›View Details                                                   ┃
-    ┃   Add to Cart                                                    ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃"
+
+
+    Banana
+
+    A yellow tropical fruit that's nutritious and energy-rich.
+
+    Benefits
+    - High in potassium
+    - Natural energy booster
+    - Aids digestion
+
+
+
+
+
+     esc go back"
   `)
 }, 10000)
 
@@ -342,7 +347,7 @@ test('list click functionality', async () => {
                                                                      ▼
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+     ↵ view details  ↑↓ navigate  ^k actions"
   `)
 
   // Click on "Apple" item
@@ -368,7 +373,7 @@ test('list click functionality', async () => {
                                                                      ▼
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+     ↵ view details  ↑↓ navigate  ^k actions"
   `)
 
   // Click on "Grape" item (visible in initial view)
@@ -394,7 +399,7 @@ test('list click functionality', async () => {
                                                                      ▼
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 }, 10000)
 
@@ -414,24 +419,24 @@ test('list actions panel with ctrl+k', async () => {
     "
 
 
-      Simple List Example ────────────────────────────────────────────
-
-      Search items...
-
-    ┃                                                                  ┃
-    ┃                                                            esc   ┃
-    ┃                                                                  ┃
-    ┃   Search actions...                                              ┃
-    ┃                                                                  ┃
-    ┃  ›View Details                                                   ┃
-    ┃   Add to Cart                                                    ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃"
+     Simple List Example ────────────────────────────────────────────
+
+     Search items...
+
+     Fruits                                                          ▲
+    ›┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+     ┃
+     ┃                                                            esc
+     ┃
+     ┃   Search actions...
+     ┃
+     ┃  ›View Details
+     ┃   Add to Cart
+     ┃
+     ┃
+     ┃
+     ┃
+     ┃"
   `)
 
   // Navigate down to second action
@@ -442,24 +447,24 @@ test('list actions panel with ctrl+k', async () => {
     "
 
 
-      Simple List Example ────────────────────────────────────────────
-
-      Search items...
-
-    ┃                                                                  ┃
-    ┃                                                            esc   ┃
-    ┃                                                                  ┃
-    ┃   Search actions...                                              ┃
-    ┃                                                                  ┃
-    ┃   View Details                                                   ┃
-    ┃  ›Add to Cart                                                    ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃                                                                  ┃"
+     Simple List Example ────────────────────────────────────────────
+
+     Search items...
+
+     Fruits                                                          ▲
+    ›┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+     ┃
+     ┃                                                            esc
+     ┃
+     ┃   Search actions...
+     ┃
+     ┃   View Details
+     ┃  ›Add to Cart
+     ┃
+     ┃
+     ┃
+     ┃
+     ┃"
   `)
 
   // Trigger the second action (Add to Cart)
@@ -485,7 +490,7 @@ test('list actions panel with ctrl+k', async () => {
                                                                      ▼
 
 
-     ↵ sel┌─────────────────────────────────────────────────────┐
+     ↵ vie┌─────────────────────────────────────────────────────┐
           │ ✓ Added to Cart - Apple has been added to your cart │
           └─────────────────────────────────────────────────────┘"
   `)
@@ -502,6 +507,125 @@ test('empty sections should be hidden', async () => {
   expect(snapshot).not.toContain('Empty section should be hidden')
 }, 10000)
 
+test('filtering selects first visible item and navigation works', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /search/i.test(text)
+    },
+  })
+
+  // Type "ora" which filters to Orange and Carrot (has "orange" keyword)
+  await session.type('ora')
+
+  await new Promise((resolve) => setTimeout(resolve, 100))
+
+  const afterFilterSnapshot = await session.text({
+    waitFor: (text) => {
+      return /ora/.test(text) && /Orange/.test(text)
+    },
+  })
+  // TODO: first visible item should be selected immediately, pending flushSync support
+  expect(afterFilterSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+    Simple List Example ────────────────────────────────────────────
+
+    ora
+
+    Orange Citrus and juicy                                   Fresh
+    Carrot Orange and crunchy                             [Healthy]
+
+
+
+
+
+
+
+
+
+    ↵ view details  ↑↓ navigate  ^k actions"
+  `)
+
+  // Press down - move function corrects invalid selection to first visible, then moves
+  await session.press('down')
+
+  const afterDownSnapshot = await session.text()
+  expect(afterDownSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Simple List Example ────────────────────────────────────────────
+
+     ora
+
+    ›Orange Citrus and juicy                                   Fresh
+     Carrot Orange and crunchy                             [Healthy]
+
+
+
+
+
+
+
+
+
+       ↑↓ navigate  ^k actions"
+  `)
+
+  // Press down again
+  await session.press('down')
+
+  const afterSecondDownSnapshot = await session.text()
+  expect(afterSecondDownSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Simple List Example ────────────────────────────────────────────
+
+     ora
+
+     Orange Citrus and juicy                                   Fresh
+    ›Carrot Orange and crunchy                             [Healthy]
+
+
+
+
+
+
+
+
+
+     ↵ view details  ↑↓ navigate  ^k actions"
+  `)
+
+  // Press down to wrap back
+  await session.press('down')
+
+  const afterWrapSnapshot = await session.text()
+  expect(afterWrapSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Simple List Example ────────────────────────────────────────────
+
+     ora
+
+    ›Orange Citrus and juicy                                   Fresh
+     Carrot Orange and crunchy                             [Healthy]
+
+
+
+
+
+
+
+
+
+       ↑↓ navigate  ^k actions"
+  `)
+}, 10000)
+
 test('list scrollbox scrolling with sections', async () => {
   await session.text({
     waitFor: (text) => {
@@ -529,7 +653,7 @@ test('list scrollbox scrolling with sections', async () => {
                                                                      ▼
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+     ↵ view details  ↑↓ navigate  ^k actions"
   `)
 
   // Navigate down through Fruits section
@@ -549,18 +673,18 @@ test('list scrollbox scrolling with sections', async () => {
 
      Search items...
 
-     Fruits                                                          ▲
-     Apple Red and sweet                            Fresh [Popular]  ▀
-     Banana Yellow and nutritious                              Ripe
-     Orange Citrus and juicy                                  Fresh
+     Orange Citrus and juicy                                  Fresh  ▲
      Grape Sweet clusters                                [Seasonal]
      Mango Tropical delight                                Imported
-     Pineapple Sweet and tangy
+     Pineapple Sweet and tangy                                       ▀
     ›Strawberry Red and sweet                             [Popular]
-                                                                     ▼
 
+     Vegetables
+     Carrot Orange and crunchy                            [Healthy]
+     Lettuce Green and fresh                                         ▼
 
-     ↵ select  ↑↓ navigate  ^k actions"
+
+       ↑↓ navigate  ^k actions"
   `)
 
   // Continue to Vegetables section
@@ -577,18 +701,18 @@ test('list scrollbox scrolling with sections', async () => {
 
      Search items...
 
-     Grape Sweet clusters                                [Seasonal]  ▲
-     Mango Tropical delight                                Imported
-     Pineapple Sweet and tangy
-     Strawberry Red and sweet                             [Popular]  ▄
-
+                                                                     ▲
      Vegetables
      Carrot Orange and crunchy                            [Healthy]
      Lettuce Green and fresh
-    ›Broccoli Green florets                               [Healthy]  ▼
+    ›Broccoli Green florets                               [Healthy]
+     Spinach Leafy greens                                   Organic
+     Tomato Red and ripe                                             ▀
+     Cucumber Cool and crisp
+     Bell Pepper Colorful and crunchy                       [Fresh]  ▼
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 
   // Navigate to the last items
@@ -618,7 +742,7 @@ test('list scrollbox scrolling with sections', async () => {
     ›Bread Freshly baked                                Today [New]  ▼
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+     ↵ view details  ↑↓ navigate  ^k actions"
   `)
 
   // Navigate back up to top
@@ -646,6 +770,6 @@ test('list scrollbox scrolling with sections', async () => {
     ›Bread Freshly baked                                Today [New]  ▼
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+     ↵ view details  ↑↓ navigate  ^k actions"
   `)
 }, 15000)

package/src/examples/list-with-toast.vitest.tsx

@@ -43,7 +43,7 @@ test('list navigation works while toast is shown', async () => {
 
 
 
-     ↵ select  ↑↓ naviga┌─────────────────────────┐
+       ↑↓ navigate  ^k a┌─────────────────────────┐
                         │ ✓ Selected - First Item │
                         └─────────────────────────┘"
   `)
@@ -71,7 +71,7 @@ test('list navigation works while toast is shown', async () => {
 
 
 
-     ↵ select  ↑↓ navig┌──────────────────────────┐
+       ↑↓ navigate  ^k ┌──────────────────────────┐
                        │ ✓ Selected - Second Item │
                        └──────────────────────────┘"
   `)
@@ -99,7 +99,7 @@ test('list navigation works while toast is shown', async () => {
 
 
 
-     ↵ select  ↑↓ naviga┌─────────────────────────┐
+       ↑↓ navigate  ^k a┌─────────────────────────┐
                         │ ✓ Selected - Third Item │
                         └─────────────────────────┘"
   `)
@@ -127,7 +127,7 @@ test('list navigation works while toast is shown', async () => {
 
 
 
-     ↵ select  ↑↓ navig┌──────────────────────────┐
+       ↑↓ navigate  ^k ┌──────────────────────────┐
                        │ ✓ Selected - Second Item │
                        └──────────────────────────┘"
   `)