inquirerjs-checkbox-search 0.1.2

package/dist/esm/index.js

@@ -0,0 +1,430 @@
+import { createPrompt, useState, useKeypress, usePagination, useEffect, useRef, useMemo, usePrefix, makeTheme, isUpKey, isDownKey, isEnterKey, Separator, } from '@inquirer/core';
+import colors from 'yoctocolors-cjs';
+import figures from '@inquirer/figures';
+import ansiEscapes from 'ansi-escapes';
+/**
+ * Default theme for the checkbox-search prompt
+ */
+const checkboxSearchTheme = {
+    icon: {
+        checked: colors.green(figures.circleFilled),
+        unchecked: figures.circle,
+        cursor: figures.pointer,
+    },
+    style: {
+        answer: colors.cyan,
+        message: colors.cyan,
+        error: (text) => colors.yellow(`> ${text}`),
+        help: colors.dim,
+        highlight: colors.cyan,
+        searchTerm: colors.cyan,
+        description: colors.dim,
+        disabled: colors.dim,
+    },
+    helpMode: 'always',
+};
+/**
+ * Type guard to check if an item is selectable (not separator or disabled)
+ * @param item - The item to check
+ * @returns True if the item can be selected
+ */
+function isSelectable(item) {
+    return !Separator.isSeparator(item) && !item.disabled;
+}
+/**
+ * Type guard to check if an item is checked/selected
+ * @param item - The item to check
+ * @returns True if the item is selected
+ */
+function isChecked(item) {
+    return isSelectable(item) && Boolean(item.checked);
+}
+/**
+ * Toggle the selection state of an item
+ * @param item - The item to toggle
+ * @returns The item with toggled selection state
+ */
+function toggle(item) {
+    return isSelectable(item) ? { ...item, checked: !item.checked } : item;
+}
+/**
+ * Normalize choice inputs into consistent format
+ * @param choices - Raw choices array (strings, choice objects, separators)
+ * @returns Normalized array of items
+ */
+function normalizeChoices(choices) {
+    return choices.map((choice) => {
+        if (Separator.isSeparator(choice))
+            return choice;
+        if (typeof choice === 'string') {
+            return {
+                value: choice,
+                name: choice,
+                short: choice,
+                disabled: false,
+                checked: false,
+            };
+        }
+        const name = choice.name ?? String(choice.value);
+        const normalizedChoice = {
+            value: choice.value,
+            name,
+            short: choice.short ?? name,
+            disabled: choice.disabled ?? false,
+            checked: choice.checked ?? false,
+        };
+        if (choice.description) {
+            normalizedChoice.description = choice.description;
+        }
+        return normalizedChoice;
+    });
+}
+/**
+ * Default filter function for static choices
+ * @param items - Array of normalized choices
+ * @param term - Search term
+ * @returns Filtered array of choices
+ */
+function defaultFilter(items, term) {
+    if (!term.trim())
+        return items;
+    const searchTerm = term.toLowerCase().normalize('NFD');
+    return items.filter((item) => {
+        const name = item.name.toLowerCase().normalize('NFD');
+        const description = (item.description ?? '').toLowerCase().normalize('NFD');
+        const value = String(item.value).toLowerCase().normalize('NFD');
+        return (name.includes(searchTerm) ||
+            description.includes(searchTerm) ||
+            value.includes(searchTerm));
+    });
+}
+/**
+ * Main checkbox-search prompt implementation
+ *
+ * A multi-select prompt with text filtering/search capability that combines
+ * the functionality of checkbox and search prompts from inquirer.js.
+ *
+ * Features:
+ * - Real-time search/filtering of options
+ * - Multi-selection with checkboxes
+ * - Keyboard navigation and shortcuts
+ * - Support for both static and async data sources
+ * - Customizable themes and validation
+ *
+ * @param config - Configuration options for the prompt
+ * @param done - Callback function called when prompt completes
+ */
+export default createPrompt((config, done) => {
+    // Stable reference for empty array to prevent unnecessary recalculations
+    const emptyArray = useMemo(() => [], []);
+    // Configuration with defaults
+    const { pageSize = 7, loop = true, required, validate = () => true, default: defaultValues = emptyArray, } = config;
+    const theme = makeTheme(checkboxSearchTheme, config.theme);
+    // State management hooks
+    const [status, setStatus] = useState('idle');
+    const prefix = usePrefix({ status, theme });
+    // Search state
+    const [searchTerm, setSearchTerm] = useState('');
+    const [searchError, setSearchError] = useState();
+    const allItemsRef = useRef([]);
+    // Initialize choices directly like the original checkbox prompt
+    const [allItems, setAllItems] = useState(() => {
+        if (config.choices) {
+            const normalized = normalizeChoices(config.choices);
+            // Apply default selections
+            return normalized.map((item) => {
+                if (isSelectable(item) && defaultValues.includes(item.value)) {
+                    return { ...item, checked: true };
+                }
+                return item;
+            });
+        }
+        return [];
+    });
+    // Compute filtered items based on search term and filtering logic
+    const filteredItems = useMemo(() => {
+        // Async source mode - use allItems directly (source handles filtering)
+        if (config.source) {
+            return allItems;
+        }
+        // Static mode - filter allItems based on search term
+        if (!searchTerm.trim()) {
+            return allItems;
+        }
+        // Filter using provided filter function or default case-insensitive filter
+        const filterFn = config.filter || defaultFilter;
+        const selectableItems = allItems.filter((item) => !Separator.isSeparator(item));
+        const filtered = filterFn(selectableItems, searchTerm);
+        // Create a set of filtered values for efficient lookup
+        const filteredValues = new Set(filtered.map((item) => item.value));
+        // Rebuild preserving current allItems state (including checked status)
+        const result = [];
+        for (const item of allItems) {
+            if (Separator.isSeparator(item)) {
+                result.push(item);
+            }
+            else if (filteredValues.has(item.value)) {
+                result.push(item); // This preserves the current checked state from allItems
+            }
+        }
+        return result;
+    }, [allItems, searchTerm, config.source, config.filter]);
+    const [active, setActive] = useState(0);
+    const [errorMsg, setError] = useState();
+    // Handle async source - load data based on search term
+    useEffect(() => {
+        if (!config.source) {
+            return;
+        }
+        const controller = new AbortController();
+        // Set loading state and clear previous errors
+        setStatus('loading');
+        setSearchError(undefined);
+        const result = config.source(searchTerm || undefined, {
+            signal: controller.signal,
+        });
+        // Handle both Promise and non-Promise returns
+        Promise.resolve(result)
+            .then((choices) => {
+            if (controller.signal.aborted)
+                return;
+            const normalizedChoices = normalizeChoices(choices);
+            setAllItems(normalizedChoices);
+            setStatus('idle');
+        })
+            .catch((error) => {
+            if (controller.signal.aborted)
+                return;
+            console.error('Source function error:', error);
+            setSearchError(error instanceof Error ? error.message : 'Failed to load choices');
+            setStatus('idle');
+        });
+        return () => {
+            controller.abort();
+        };
+    }, [config.source, searchTerm]);
+    // Update ref whenever allItems changes
+    useEffect(() => {
+        allItemsRef.current = allItems;
+    }, [allItems]);
+    // Reset active index when filtered items change, but preserve cursor position during selection toggles
+    useEffect(() => {
+        // Don't reset cursor position if we're just toggling selection on the same items
+        // Only reset when the actual set of filtered items changes (not their selection state)
+        const currentFilteredValues = filteredItems
+            .filter((item) => !Separator.isSeparator(item))
+            .map((item) => item.value);
+        const activeItem = filteredItems[active];
+        const activeValue = activeItem && !Separator.isSeparator(activeItem)
+            ? activeItem.value
+            : null;
+        // If the currently active item is still in the filtered list, preserve its position
+        if (activeValue && currentFilteredValues.includes(activeValue)) {
+            const newActiveIndex = filteredItems.findIndex((item) => !Separator.isSeparator(item) &&
+                item.value === activeValue);
+            if (newActiveIndex !== -1) {
+                setActive(newActiveIndex);
+                return;
+            }
+        }
+        // Otherwise reset to 0 (when filtering actually changes the set of items)
+        setActive(0);
+    }, [filteredItems, active]);
+    // Keyboard event handling
+    useKeypress((key, rl) => {
+        // Allow search input even during loading, but block other actions
+        const isNavigationOrAction = key.name === 'up' ||
+            key.name === 'down' ||
+            key.name === 'tab' ||
+            key.name === 'enter' ||
+            key.name === 'escape';
+        if (status !== 'idle' && isNavigationOrAction) {
+            return;
+        }
+        // Clear any existing errors
+        setError(undefined);
+        // Handle Escape key - clear search term quickly
+        if (key.name === 'escape') {
+            rl.line = ''; // Clear readline input first (avoid re-render)
+            setSearchTerm(''); // Then update state
+            return;
+        }
+        // Handle navigation
+        if (isUpKey(key) || isDownKey(key)) {
+            const direction = isUpKey(key) ? -1 : 1;
+            const selectableIndexes = filteredItems
+                .map((item, index) => ({ item, index }))
+                .filter(({ item }) => isSelectable(item))
+                .map(({ index }) => index);
+            if (selectableIndexes.length === 0)
+                return;
+            const currentSelectableIndex = selectableIndexes.findIndex((index) => index >= active);
+            let nextSelectableIndex = currentSelectableIndex + direction;
+            if (loop) {
+                if (nextSelectableIndex < 0)
+                    nextSelectableIndex = selectableIndexes.length - 1;
+                if (nextSelectableIndex >= selectableIndexes.length)
+                    nextSelectableIndex = 0;
+            }
+            else {
+                nextSelectableIndex = Math.max(0, Math.min(nextSelectableIndex, selectableIndexes.length - 1));
+            }
+            setActive(selectableIndexes[nextSelectableIndex] || 0);
+            return;
+        }
+        // Handle selection toggle with tab key ONLY - prevent tab from affecting search text
+        if (key.name === 'tab') {
+            const activeItem = filteredItems[active];
+            if (activeItem && isSelectable(activeItem)) {
+                const activeValue = activeItem.value;
+                setAllItems(allItems.map((item) => {
+                    // Compare by value only for robust matching
+                    if (!Separator.isSeparator(item) && item.value === activeValue) {
+                        const toggled = toggle(item);
+                        return toggled;
+                    }
+                    return item;
+                }));
+            }
+            return; // Important: return here to prevent tab from being added to search term
+        }
+        // Handle submission
+        if (isEnterKey(key)) {
+            const selectedChoices = allItems.filter(isChecked);
+            if (required && selectedChoices.length === 0) {
+                setError('At least one choice must be selected');
+                return;
+            }
+            const result = validate(selectedChoices);
+            if (typeof result === 'string') {
+                setError(result);
+                return;
+            }
+            if (result === false) {
+                setError('Invalid selection');
+                return;
+            }
+            if (typeof result === 'object' && 'then' in result) {
+                result
+                    .then((isValid) => {
+                    if (typeof isValid === 'string') {
+                        setError(isValid);
+                    }
+                    else if (isValid === false) {
+                        setError('Invalid selection');
+                    }
+                    else {
+                        setStatus('done');
+                        done(selectedChoices.map((choice) => choice.value));
+                    }
+                })
+                    .catch(() => {
+                    setError('Validation failed');
+                });
+                return;
+            }
+            setStatus('done');
+            done(selectedChoices.map((choice) => choice.value));
+            return;
+        }
+        // Handle all other input as search term updates EXCEPT tab
+        // Only update search term for actual typing, not navigation keys
+        if (!isNavigationOrAction) {
+            setSearchTerm(rl.line);
+        }
+    });
+    // Create renderItem function that's reactive to current state
+    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;
+            };
+            const choiceName = item.name;
+            const checkbox = resolveIcon(isChecked ? theme.icon.checked : theme.icon.unchecked, choiceName);
+            const cursor = isActive
+                ? resolveIcon(theme.icon.cursor, choiceName)
+                : ' ';
+            line.push(cursor, checkbox);
+            let text = item.name;
+            if (isActive) {
+                text = theme.style.highlight(text);
+            }
+            else if (item.disabled) {
+                text = theme.style.disabled(text);
+            }
+            line.push(text);
+            // Show disabled reason if item is disabled
+            if (item.disabled) {
+                const disabledReason = typeof item.disabled === 'string'
+                    ? item.disabled
+                    : 'disabled';
+                line.push(theme.style.disabled(`(${disabledReason})`));
+            }
+            else if (item.description) {
+                const description = item.description;
+                // If using custom description styling, give full control to user (no parentheses)
+                // If using default styling, add parentheses for backward compatibility
+                const isUsingCustomDescriptionStyle = config.theme?.style?.description !== undefined;
+                if (description) {
+                    if (isUsingCustomDescriptionStyle) {
+                        line.push(theme.style.description(description));
+                    }
+                    else {
+                        line.push(`(${theme.style.description(description)})`);
+                    }
+                }
+            }
+            return line.join(' ');
+        };
+    }, [allItems, theme, config.theme]);
+    // Setup pagination
+    const page = usePagination({
+        items: filteredItems,
+        active,
+        renderItem,
+        pageSize,
+        loop,
+    });
+    // Render the prompt
+    const message = theme.style.message(config.message, status);
+    let helpTip = '';
+    if (theme.helpMode === 'always') {
+        const tips = ['Tab to select', 'Enter to submit'];
+        helpTip = `\n${theme.style.help(`(${tips.join(', ')})`)}`;
+    }
+    let searchLine = '';
+    if (config.source || searchTerm || status === 'loading') {
+        const searchPrefix = status === 'loading' ? 'Loading...' : 'Search:';
+        const styledTerm = searchTerm ? theme.style.searchTerm(searchTerm) : '';
+        searchLine = `\n${searchPrefix} ${styledTerm}`;
+    }
+    let errorLine = '';
+    if (errorMsg) {
+        errorLine = `\n${theme.style.error(errorMsg)}`;
+    }
+    if (searchError) {
+        errorLine = `\n${theme.style.error(`Error: ${searchError}`)}`;
+    }
+    let content = '';
+    if (status === 'loading') {
+        content = '\nLoading choices...';
+    }
+    else if (filteredItems.length === 0) {
+        content = '\nNo choices available';
+    }
+    else {
+        content = `\n${page}`;
+    }
+    return `${prefix} ${message}${helpTip}${searchLine}${errorLine}${content}${ansiEscapes.cursorHide}`;
+});
+// Re-export Separator for convenience
+export { Separator } from '@inquirer/core';

package/dist/esm/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "inquirerjs-checkbox-search",
+  "version": "0.1.2",
+  "description": "A multi-select prompt with text filtering for inquirer.js",
+  "keywords": [
+    "answer",
+    "answers",
+    "ask",
+    "checkbox",
+    "cli",
+    "command",
+    "command-line",
+    "filter",
+    "inquire",
+    "inquirer",
+    "interface",
+    "javascript",
+    "menu",
+    "multi-select",
+    "node",
+    "nodejs",
+    "prompt",
+    "prompts",
+    "question",
+    "readline",
+    "search",
+    "select",
+    "terminal",
+    "tty",
+    "ui"
+  ],
+  "homepage": "https://github.com/texarkanine/inquirerjs-checkbox-search#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/texarkanine/inquirerjs-checkbox-search.git"
+  },
+  "bugs": {
+    "url": "https://github.com/texarkanine/inquirerjs-checkbox-search/issues"
+  },
+  "license": "MIT",
+  "author": "Texarkanine <texarkanine@protonmail.com>",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/commonjs/index.d.ts",
+        "default": "./dist/commonjs/index.js"
+      }
+    }
+  },
+  "main": "./dist/commonjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/commonjs/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tshy",
+    "clean": "rimraf dist .tshy",
+    "dev": "tshy --watch",
+    "lint": "eslint . --ext .ts --fix",
+    "lint:check": "eslint . --ext .ts",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "npm run format && npm run lint && npm run typecheck && npm run test:unit",
+    "test:ci": "npm run format:check && npm run lint:check && npm run typecheck && npm run test:unit",
+    "test:unit": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "typecheck": "tsc --noEmit",
+    "attw": "attw --pack",
+    "pkg:inspect": "rimraf package-inspect *.tgz && npm run build && npm pack && mkdir package-inspect && tar -xzf *.tgz -C package-inspect && echo '\\n📦 Package extracted to package-inspect/ for inspection'",
+    "prepublishOnly": "npm run clean && npm run build && npm run test:ci && npm run attw"
+  },
+  "dependencies": {
+    "@inquirer/core": "^10.1.13",
+    "@inquirer/figures": "^1.0.12",
+    "@inquirer/type": "^3.0.7",
+    "ansi-escapes": "^4.3.2",
+    "yoctocolors-cjs": "^2.1.2"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.1",
+    "@inquirer/testing": "^2.1.47",
+    "@types/node": "^20.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@vitest/coverage-v8": "^2.0.0",
+    "@vitest/ui": "^2.0.0",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^9.0.0",
+    "prettier": "^3.0.0",
+    "rimraf": "^6.0.0",
+    "tshy": "^3.0.2",
+    "typescript": "^5.6.0",
+    "vitest": "^2.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "tshy": {
+    "exclude": [
+      "src/**/*.test.ts",
+      "src/**/*.spec.ts"
+    ],
+    "exports": {
+      "./package.json": "./package.json",
+      ".": "./src/index.ts"
+    }
+  },
+  "peerDependencies": {
+    "@types/node": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "@types/node": {
+      "optional": true
+    }
+  }
+}