inquirerjs-checkbox-search 0.1.2

package/dist/commonjs/index.js

@@ -0,0 +1,437 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Separator = void 0;
+const core_1 = require("@inquirer/core");
+const yoctocolors_cjs_1 = __importDefault(require("yoctocolors-cjs"));
+const figures_1 = __importDefault(require("@inquirer/figures"));
+const ansi_escapes_1 = __importDefault(require("ansi-escapes"));
+/**
+ * Default theme for the checkbox-search prompt
+ */
+const checkboxSearchTheme = {
+    icon: {
+        checked: yoctocolors_cjs_1.default.green(figures_1.default.circleFilled),
+        unchecked: figures_1.default.circle,
+        cursor: figures_1.default.pointer,
+    },
+    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,
+        highlight: yoctocolors_cjs_1.default.cyan,
+        searchTerm: yoctocolors_cjs_1.default.cyan,
+        description: yoctocolors_cjs_1.default.dim,
+        disabled: yoctocolors_cjs_1.default.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 !core_1.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 (core_1.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
+ */
+exports.default = (0, core_1.createPrompt)((config, done) => {
+    // Stable reference for empty array to prevent unnecessary recalculations
+    const emptyArray = (0, core_1.useMemo)(() => [], []);
+    // Configuration with defaults
+    const { pageSize = 7, loop = true, required, validate = () => true, default: defaultValues = emptyArray, } = config;
+    const theme = (0, core_1.makeTheme)(checkboxSearchTheme, config.theme);
+    // State management hooks
+    const [status, setStatus] = (0, core_1.useState)('idle');
+    const prefix = (0, core_1.usePrefix)({ status, theme });
+    // Search state
+    const [searchTerm, setSearchTerm] = (0, core_1.useState)('');
+    const [searchError, setSearchError] = (0, core_1.useState)();
+    const allItemsRef = (0, core_1.useRef)([]);
+    // Initialize choices directly like the original checkbox prompt
+    const [allItems, setAllItems] = (0, core_1.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 = (0, core_1.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) => !core_1.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 (core_1.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] = (0, core_1.useState)(0);
+    const [errorMsg, setError] = (0, core_1.useState)();
+    // Handle async source - load data based on search term
+    (0, core_1.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
+    (0, core_1.useEffect)(() => {
+        allItemsRef.current = allItems;
+    }, [allItems]);
+    // Reset active index when filtered items change, but preserve cursor position during selection toggles
+    (0, core_1.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) => !core_1.Separator.isSeparator(item))
+            .map((item) => item.value);
+        const activeItem = filteredItems[active];
+        const activeValue = activeItem && !core_1.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) => !core_1.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
+    (0, core_1.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 ((0, core_1.isUpKey)(key) || (0, core_1.isDownKey)(key)) {
+            const direction = (0, core_1.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 (!core_1.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 ((0, core_1.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 = (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;
+            };
+            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 = (0, core_1.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}${ansi_escapes_1.default.cursorHide}`;
+});
+// Re-export Separator for convenience
+var core_2 = require("@inquirer/core");
+Object.defineProperty(exports, "Separator", { enumerable: true, get: function () { return core_2.Separator; } });

package/dist/commonjs/package.json

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

package/dist/esm/index.d.ts

@@ -0,0 +1,82 @@
+import { Separator, type Theme } from '@inquirer/core';
+import type { PartialDeep } from '@inquirer/type';
+/**
+ * Theme configuration for the checkbox-search prompt
+ */
+type CheckboxSearchTheme = {
+    icon: {
+        checked: string | ((text: string) => string);
+        unchecked: string | ((text: string) => string);
+        cursor: string | ((text: string) => string);
+    };
+    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;
+    };
+    helpMode: 'always' | 'never' | 'auto';
+};
+/**
+ * Choice object for the checkbox-search prompt
+ */
+export type Choice<Value> = {
+    value: Value;
+    name?: string;
+    description?: string;
+    short?: string;
+    disabled?: boolean | string;
+    checked?: boolean;
+    type?: never;
+};
+/**
+ * Normalized choice object used internally
+ */
+export type NormalizedChoice<Value> = {
+    value: Value;
+    name: string;
+    description?: string;
+    short: string;
+    disabled: boolean | string;
+    checked: boolean;
+};
+/**
+ * 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
+ */
+declare const _default: <Value>(config: {
+    message: string;
+    prefix?: string | undefined;
+    pageSize?: number | undefined;
+    instructions?: string | boolean | undefined;
+    choices?: readonly (string | Separator)[] | readonly (Separator | Choice<Value>)[] | undefined;
+    source?: ((term: string | undefined, opt: {
+        signal: AbortSignal;
+    }) => readonly (string | Separator)[] | readonly (Separator | Choice<Value>)[] | Promise<readonly (string | Separator)[]> | Promise<readonly (Separator | Choice<Value>)[]>) | undefined;
+    filter?: ((items: readonly NormalizedChoice<Value>[], term: string) => readonly NormalizedChoice<Value>[]) | undefined;
+    loop?: boolean | undefined;
+    required?: boolean | undefined;
+    validate?: ((choices: readonly NormalizedChoice<Value>[]) => boolean | string | Promise<string | boolean>) | undefined;
+    theme?: PartialDeep<Theme<CheckboxSearchTheme>> | undefined;
+    default?: readonly Value[] | undefined;
+}, context?: import("@inquirer/type").Context) => Promise<Value[]> & {
+    cancel: () => void;
+};
+export default _default;
+export { Separator } from '@inquirer/core';