inquirerjs-checkbox-search 0.5.0 → 0.6.0

package/README.md

@@ -90,7 +90,7 @@ type PageSizeConfig = {
 1. Start with base page size (from `base` or auto-calculated)
 2. Calculate buffer:
    - If `autoBufferDescriptions` is true: Add lines needed for largest description
-   - Otherwise: Add `buffer` value (if specified)
+   - Add `buffer` value (if specified)
    - Ensure buffer is at least `minBuffer` (if specified)
 3. Subtract buffer from base page size
 4. Apply `min`/`max` constraints
@@ -101,21 +101,22 @@ type PageSizeConfig = {
 ```typescript
 type CheckboxSearchTheme = {
   icon: {
-    checked: string | ((text: string) => string);
-    unchecked: string | ((text: string) => string);
-    cursor: string | ((text: string) => string);
+    checked: string | ((text: string) => string); // Icon for checked items
+    unchecked: string | ((text: string) => string); // Icon for unchecked items
+    cursor: string | ((text: string) => string); // Icon for cursor/current item
+    nocursor?: string; // Icon/space placeholder for cursor
   };
   style: {
-    answer: (text: string) => string;
-    message: (text: string) => string;
-    error: (text: string) => string;
-    help: (text: string) => string;
-    highlight: (text: string) => string;
-    searchTerm: (text: string) => string;
-    description: (text: string) => string;
-    disabled: (text: string) => string;
+    message: (text: string) => string; // Style for prompt message
+    error: (text: string) => string; // Style for error messages
+    help: (text: string) => string; // Style for help text
+    highlight: (text: string) => string; // Style for highlighted items (takes precedence)
+    searchTerm: (text: string) => string; // Style for search term display
+    description: (text: string) => string; // Style for item descriptions
+    disabled: (text: string) => string; // Style for disabled items
+    checked: (text: string) => string; // Style for checked items
   };
-  helpMode: 'always' | 'never' | 'auto';
+  helpMode: 'always' | 'never' | 'auto'; // When to show help text
 };
 ```
 
@@ -220,20 +221,17 @@ npm run prepublishOnly    # Full build + test + validation pipeline
 #### File Structure
 
 ```
-├── src/
-│   ├── index.ts          # Main prompt implementation
-│   └── *.test.ts         # Test files (excluded from build)
-├── dist/                 # Built output (generated by tshy)
-│   ├── esm/             # ES modules
-│   └── commonjs/        # CommonJS
-├── .github/
-│   └── workflows/       # CI/CD workflows
-├── node_modules/        # Dependencies
-├── package.json         # Package config with tshy setup
-├── tsconfig.json        # TypeScript config
-├── vitest.config.ts     # Test config
-├── eslint.config.js     # Linting config
-└── .prettierrc          # Formatting config
+├── src/            # actual source code
+│   ├── index.ts
+│   └── __tests__/
+├── dist/           # build output
+│   ├── esm/
+│   └── commonjs/
+├── examples/       # usage examples
+├── demos/          # scripts to record GIFs from examples
+├── docs/           # documentation resources
+│   └── img/
+└── scripts/        # build and utility scripts
 ```
 
 #### Demo Generation
@@ -247,12 +245,12 @@ To generate demos locally, run `npm run demo:generate:all` (requires `docker`).
 1. **Before Committing**
 
    ```bash
-   npm test                  # Run all quality checks + tests
+   npm test
    ```
 
 2. **Before Publishing**
    ```bash
-   npm run prepublishOnly    # Full validation pipeline
+   npm run prepublishOnly
    ```
 
 #### Build & Release Workflow
@@ -260,19 +258,20 @@ To generate demos locally, run `npm run demo:generate:all` (requires `docker`).
 1. **Development Build**
 
    ```bash
-   npm run build             # One-time build
-   npm run dev               # Watch mode for development
+   npm run build
+   npm run dev
    ```
 
 2. **Package Validation**
 
    ```bash
-   npm run attw              # Validate dual exports work correctly
+   npm run attw
    ```
 
 3. **Release Process** (Automated)
    - Push changes to `main` branch
    - Release Please creates/updates release PR
+     - demo images are generated and added to the PR
    - Merge release PR to trigger:
      - GitHub release creation
      - npm package publication

package/dist/commonjs/index.d.ts

@@ -8,9 +8,9 @@ type CheckboxSearchTheme = {
         checked: string | ((text: string) => string);
         unchecked: string | ((text: string) => string);
         cursor: string | ((text: string) => string);
+        nocursor?: string | ((text: string) => string);
     };
     style: {
-        answer: (text: string) => string;
         message: (text: string) => string;
         error: (text: string) => string;
         help: (text: string) => string;
@@ -18,6 +18,7 @@ type CheckboxSearchTheme = {
         searchTerm: (text: string) => string;
         description: (text: string) => string;
         disabled: (text: string) => string;
+        checked: (text: string) => string;
     };
     helpMode: 'always' | 'never' | 'auto';
 };

package/dist/commonjs/index.js

@@ -20,9 +20,9 @@ const checkboxSearchTheme = {
         checked: yoctocolors_cjs_1.default.green(figures_1.default.circleFilled),
         unchecked: figures_1.default.circle,
         cursor: figures_1.default.pointer,
+        nocursor: ' ', // Default: single space when cursor is not active
     },
     style: {
-        answer: yoctocolors_cjs_1.default.cyan,
         message: yoctocolors_cjs_1.default.cyan,
         error: (text) => yoctocolors_cjs_1.default.yellow(`> ${text}`),
         help: yoctocolors_cjs_1.default.dim,
@@ -30,6 +30,7 @@ const checkboxSearchTheme = {
         searchTerm: yoctocolors_cjs_1.default.cyan,
         description: yoctocolors_cjs_1.default.cyan,
         disabled: yoctocolors_cjs_1.default.dim,
+        checked: yoctocolors_cjs_1.default.green,
     },
     helpMode: 'always',
 };
@@ -190,10 +191,8 @@ function resolvePageSize(pageSize, items) {
     if (pageSize.autoBufferDescriptions) {
         buffer += calculateDescriptionLines(items, pageSize.autoBufferCountsLineWidth || false);
     }
-    else {
-        // 2c: Add buffer value (only if not auto-buffering)
-        buffer += pageSize.buffer || 0;
-    }
+    // 2c: Add buffer value (always if specified)
+    buffer += pageSize.buffer || 0;
     // 2d: Ensure at least minBuffer
     if (pageSize.minBuffer !== undefined) {
         buffer = Math.max(buffer, pageSize.minBuffer);
@@ -537,26 +536,27 @@ exports.default = (0, core_1.createPrompt)((config, done) => {
         }
         return undefined;
     }, [active, filteredItems]);
-    // Create renderItem function that's reactive to current state
+    // Helper function to resolve icon (string or function)
+    const resolveIcon = (icon, choiceText) => {
+        return typeof icon === 'function' ? icon(choiceText) : icon;
+    };
+    // Create renderItem function that's reactive to current state but minimizes recreations
     const renderItem = (0, core_1.useMemo)(() => {
         return ({ item, isActive }) => {
             const line = [];
             if (core_1.Separator.isSeparator(item)) {
                 return yoctocolors_cjs_1.default.dim(item.separator);
             }
-            // Look up checked state directly from allItems to get the current state
-            const currentItem = allItems.find((allItem) => !core_1.Separator.isSeparator(allItem) &&
-                allItem.value === item.value);
-            const isChecked = currentItem?.checked || false;
-            // Helper function to resolve icon (string or function)
-            const resolveIcon = (icon, choiceText) => {
-                return typeof icon === 'function' ? icon(choiceText) : icon;
-            };
+            // Direct access to the checked state (item is from the same source as allItems)
+            const isChecked = !core_1.Separator.isSeparator(item) &&
+                item.checked;
             const choiceName = item.name;
             const checkbox = resolveIcon(isChecked ? theme.icon.checked : theme.icon.unchecked, choiceName);
+            // If active, use the cursor icon, otherwise use appropriate spacing to align items
             const cursor = isActive
                 ? resolveIcon(theme.icon.cursor, choiceName)
-                : ' ';
+                : resolveIcon(theme.icon.nocursor ?? ' ', choiceName);
+            // Keep cursor and checkbox as separate elements so join(' ') adds the proper space between them
             line.push(cursor, checkbox);
             let text = item.name;
             if (isActive) {
@@ -566,6 +566,9 @@ exports.default = (0, core_1.createPrompt)((config, done) => {
             else if (item.disabled) {
                 text = theme.style.disabled(text);
             }
+            else if (isChecked) {
+                text = theme.style.checked(text);
+            }
             line.push(text);
             // Show disabled reason if item is disabled (but no descriptions inline anymore)
             if (item.disabled) {
@@ -577,7 +580,7 @@ exports.default = (0, core_1.createPrompt)((config, done) => {
             // NOTE: Removed the inline description display - descriptions now appear at bottom
             return line.join(' ');
         };
-    }, [allItems, theme, config.theme]);
+    }, [theme, config.theme]);
     // Setup pagination
     const page = (0, core_1.usePagination)({
         items: filteredItems,

package/dist/esm/index.d.ts

@@ -8,9 +8,9 @@ type CheckboxSearchTheme = {
         checked: string | ((text: string) => string);
         unchecked: string | ((text: string) => string);
         cursor: string | ((text: string) => string);
+        nocursor?: string | ((text: string) => string);
     };
     style: {
-        answer: (text: string) => string;
         message: (text: string) => string;
         error: (text: string) => string;
         help: (text: string) => string;
@@ -18,6 +18,7 @@ type CheckboxSearchTheme = {
         searchTerm: (text: string) => string;
         description: (text: string) => string;
         disabled: (text: string) => string;
+        checked: (text: string) => string;
     };
     helpMode: 'always' | 'never' | 'auto';
 };

package/dist/esm/index.js

@@ -10,9 +10,9 @@ const checkboxSearchTheme = {
         checked: colors.green(figures.circleFilled),
         unchecked: figures.circle,
         cursor: figures.pointer,
+        nocursor: ' ', // Default: single space when cursor is not active
     },
     style: {
-        answer: colors.cyan,
         message: colors.cyan,
         error: (text) => colors.yellow(`> ${text}`),
         help: colors.dim,
@@ -20,6 +20,7 @@ const checkboxSearchTheme = {
         searchTerm: colors.cyan,
         description: colors.cyan,
         disabled: colors.dim,
+        checked: colors.green,
     },
     helpMode: 'always',
 };
@@ -180,10 +181,8 @@ export function resolvePageSize(pageSize, items) {
     if (pageSize.autoBufferDescriptions) {
         buffer += calculateDescriptionLines(items, pageSize.autoBufferCountsLineWidth || false);
     }
-    else {
-        // 2c: Add buffer value (only if not auto-buffering)
-        buffer += pageSize.buffer || 0;
-    }
+    // 2c: Add buffer value (always if specified)
+    buffer += pageSize.buffer || 0;
     // 2d: Ensure at least minBuffer
     if (pageSize.minBuffer !== undefined) {
         buffer = Math.max(buffer, pageSize.minBuffer);
@@ -527,26 +526,27 @@ export default createPrompt((config, done) => {
         }
         return undefined;
     }, [active, filteredItems]);
-    // Create renderItem function that's reactive to current state
+    // Helper function to resolve icon (string or function)
+    const resolveIcon = (icon, choiceText) => {
+        return typeof icon === 'function' ? icon(choiceText) : icon;
+    };
+    // Create renderItem function that's reactive to current state but minimizes recreations
     const renderItem = useMemo(() => {
         return ({ item, isActive }) => {
             const line = [];
             if (Separator.isSeparator(item)) {
                 return colors.dim(item.separator);
             }
-            // Look up checked state directly from allItems to get the current state
-            const currentItem = allItems.find((allItem) => !Separator.isSeparator(allItem) &&
-                allItem.value === item.value);
-            const isChecked = currentItem?.checked || false;
-            // Helper function to resolve icon (string or function)
-            const resolveIcon = (icon, choiceText) => {
-                return typeof icon === 'function' ? icon(choiceText) : icon;
-            };
+            // Direct access to the checked state (item is from the same source as allItems)
+            const isChecked = !Separator.isSeparator(item) &&
+                item.checked;
             const choiceName = item.name;
             const checkbox = resolveIcon(isChecked ? theme.icon.checked : theme.icon.unchecked, choiceName);
+            // If active, use the cursor icon, otherwise use appropriate spacing to align items
             const cursor = isActive
                 ? resolveIcon(theme.icon.cursor, choiceName)
-                : ' ';
+                : resolveIcon(theme.icon.nocursor ?? ' ', choiceName);
+            // Keep cursor and checkbox as separate elements so join(' ') adds the proper space between them
             line.push(cursor, checkbox);
             let text = item.name;
             if (isActive) {
@@ -556,6 +556,9 @@ export default createPrompt((config, done) => {
             else if (item.disabled) {
                 text = theme.style.disabled(text);
             }
+            else if (isChecked) {
+                text = theme.style.checked(text);
+            }
             line.push(text);
             // Show disabled reason if item is disabled (but no descriptions inline anymore)
             if (item.disabled) {
@@ -567,7 +570,7 @@ export default createPrompt((config, done) => {
             // NOTE: Removed the inline description display - descriptions now appear at bottom
             return line.join(' ');
         };
-    }, [allItems, theme, config.theme]);
+    }, [theme, config.theme]);
     // Setup pagination
     const page = usePagination({
         items: filteredItems,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inquirerjs-checkbox-search",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A multi-select prompt with text filtering for inquirer.js",
   "keywords": [
     "answer",
@@ -86,6 +86,7 @@
     "demo:generate": "node scripts/generate-demo.js",
     "demo:generate:basic": "node scripts/generate-demo.js basic",
     "demo:generate:validation": "node scripts/generate-demo.js validation",
+    "demo:generate:custom-theme": "node scripts/generate-demo.js custom-theme",
     "demo:generate:all": "node scripts/generate-demo.js all"
   },
   "dependencies": {