@capyx/components-library 0.0.10 → 0.0.12

package/dist/addons/AutocompleteInput.d.ts

@@ -7,6 +7,18 @@ export type AutocompleteInputProps = PropsWithChildren<{
     suggestions: string[];
     /** Whether to highlight the first suggestion (default: true) */
     highlightFirstSuggestion?: boolean;
+    /** Custom class name for the suggestions dropdown container */
+    listClassName?: string;
+    /** Custom style for the suggestions dropdown container */
+    listStyle?: React.CSSProperties;
+    /** Custom class name for individual suggestion items */
+    itemClassName?: string;
+    /** Custom style for individual suggestion items */
+    itemStyle?: React.CSSProperties;
+    /** Custom class name for the currently highlighted suggestion item */
+    activeItemClassName?: string;
+    /** Custom style for the currently highlighted suggestion item */
+    activeItemStyle?: React.CSSProperties;
 }>;
 /**
  * AutocompleteInput - A wrapper addon that adds autocomplete/suggestions to text inputs

package/dist/addons/AutocompleteInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteInput.d.ts","sourceRoot":"","sources":["../../lib/addons/AutocompleteInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAKjF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,CAAC;IACtD,kDAAkD;IAClD,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,gEAAgE;IAChE,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACnC,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAgHxD,CAAC"}
+{"version":3,"file":"AutocompleteInput.d.ts","sourceRoot":"","sources":["../../lib/addons/AutocompleteInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAiB,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AAKhF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,CAAC;IACtD,kDAAkD;IAClD,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,gEAAgE;IAChE,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,sEAAsE;IACtE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iEAAiE;IACjE,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA6LxD,CAAC"}

package/dist/addons/AutocompleteInput.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, useEffect, useRef, useState } from 'react';
-import Autosuggest from 'react-autosuggest';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useCallback, useEffect, useRef, useState } from 'react';
+import { ListGroup } from 'react-bootstrap';
 import { useFormContext } from 'react-hook-form';
 /**
  * AutocompleteInput - A wrapper addon that adds autocomplete/suggestions to text inputs
@@ -30,72 +30,116 @@ import { useFormContext } from 'react-hook-form';
  * </AutocompleteInput>
  * ```
  */
-export const AutocompleteInput = ({ suggestions: allSuggestions, children, highlightFirstSuggestion = true, }) => {
+export const AutocompleteInput = ({ suggestions: allSuggestions, children, highlightFirstSuggestion = true, listClassName, listStyle, itemClassName, itemStyle, activeItemClassName, activeItemStyle, }) => {
     const formContext = useFormContext();
     const [filteredSuggestions, setFilteredSuggestions] = useState([]);
-    const [inputValue, setInputValue] = useState('');
-    const nameRef = useRef('');
-    // Extract child props
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const containerRef = useRef(null);
+    const listRef = useRef(null);
+    // Extract child element and its props
     const childElement = children;
     const childProps = childElement?.props;
     const name = childProps?.name || '';
-    nameRef.current = name;
-    // Sync input value with form context or child value
-    useEffect(() => {
-        if (formContext && name) {
-            const formValue = formContext.getValues(name);
-            setInputValue(formValue || '');
+    // Filter suggestions based on the current input value
+    const filterSuggestions = useCallback((value) => {
+        const trimmed = value.trim().toLowerCase();
+        if (trimmed.length === 0) {
+            setFilteredSuggestions([]);
+            setShowSuggestions(false);
+            return;
         }
-        else if (childProps?.value !== undefined) {
-            setInputValue(String(childProps.value));
-        }
-    }, [formContext, name, childProps?.value]);
-    // Filter suggestions based on input value
-    const getSuggestions = (value) => {
-        const trimmedValue = value.trim().toLowerCase();
-        if (trimmedValue.length === 0)
-            return [];
-        return allSuggestions.filter((suggestion) => suggestion.toLowerCase().includes(trimmedValue));
-    };
-    const onSuggestionsFetchRequested = ({ value }) => {
-        setFilteredSuggestions(getSuggestions(value));
-    };
-    const onSuggestionsClearRequested = () => {
-        setFilteredSuggestions([]);
-    };
-    const getSuggestionValue = (suggestion) => suggestion;
-    const renderSuggestion = (suggestion) => _jsx("span", { children: suggestion });
-    const handleChange = (_event, { newValue }) => {
-        setInputValue(newValue);
-        // Update form context if available
+        const filtered = allSuggestions.filter((s) => s.toLowerCase().includes(trimmed));
+        setFilteredSuggestions(filtered);
+        setShowSuggestions(filtered.length > 0);
+        setHighlightedIndex(highlightFirstSuggestion ? 0 : -1);
+    }, [allSuggestions, highlightFirstSuggestion]);
+    // Apply a selected suggestion to the input
+    const selectSuggestion = useCallback((suggestion) => {
         if (formContext && name) {
-            formContext.setValue(name, newValue);
+            formContext.setValue(name, suggestion, { shouldValidate: true });
         }
-        // Call child's onChange if provided
+        childProps?.onChange?.(suggestion);
+        setShowSuggestions(false);
+        setFilteredSuggestions([]);
+    }, [formContext, name, childProps?.onChange]);
+    // Intercept onChange from the child to filter suggestions
+    const handleChange = useCallback((newValue) => {
         childProps?.onChange?.(newValue);
-    };
-    return (_jsx(Autosuggest, { suggestions: filteredSuggestions, onSuggestionsFetchRequested: onSuggestionsFetchRequested, onSuggestionsClearRequested: onSuggestionsClearRequested, getSuggestionValue: getSuggestionValue, renderSuggestion: renderSuggestion, highlightFirstSuggestion: highlightFirstSuggestion, inputProps: {
-            value: inputValue,
-            onChange: handleChange,
-        }, renderInputComponent: (inputProps) => {
-            // Clone the child element and merge with autosuggest props
-            const { value, onChange: autosuggestOnChange, ...autosuggestProps } = inputProps;
-            return cloneElement(childElement, {
-                ...autosuggestProps,
-                value,
-                onChange: (newValue) => {
-                    // Handle both event objects and direct values
-                    const actualValue = typeof newValue === 'string'
-                        ? newValue
-                        : newValue?.target
-                            ?.value || '';
-                    // Create synthetic event for Autosuggest
-                    const syntheticEvent = {};
-                    autosuggestOnChange?.(syntheticEvent, {
-                        newValue: actualValue,
-                        method: 'type',
-                    });
-                },
-            });
-        } }));
+        filterSuggestions(newValue);
+    }, [childProps?.onChange, filterSuggestions]);
+    // Keyboard navigation for the suggestions dropdown
+    const handleKeyDown = useCallback((e) => {
+        if (!showSuggestions || filteredSuggestions.length === 0)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setHighlightedIndex((prev) => prev < filteredSuggestions.length - 1 ? prev + 1 : 0);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setHighlightedIndex((prev) => prev > 0 ? prev - 1 : filteredSuggestions.length - 1);
+                break;
+            case 'Enter':
+                if (highlightedIndex >= 0 &&
+                    highlightedIndex < filteredSuggestions.length) {
+                    e.preventDefault();
+                    selectSuggestion(filteredSuggestions[highlightedIndex]);
+                }
+                break;
+            case 'Escape':
+                setShowSuggestions(false);
+                break;
+        }
+    }, [showSuggestions, filteredSuggestions, highlightedIndex, selectSuggestion]);
+    // Scroll the highlighted item into view when navigating with keyboard
+    useEffect(() => {
+        if (highlightedIndex < 0 || !listRef.current)
+            return;
+        const items = listRef.current.querySelectorAll('[role="option"]');
+        const item = items[highlightedIndex];
+        item?.scrollIntoView({ block: 'nearest' });
+    }, [highlightedIndex]);
+    // Close suggestions when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(e.target)) {
+                setShowSuggestions(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    // Clone the child element, overriding onChange and onBlur to hook into the autocomplete logic
+    const enhancedChild = cloneElement(childElement, {
+        onChange: handleChange,
+        onBlur: () => {
+            // Delay closing so a suggestion click can register first
+            setTimeout(() => setShowSuggestions(false), 150);
+            childProps?.onBlur?.();
+        },
+    });
+    return (_jsxs("div", { ref: containerRef, style: { position: 'relative' }, onKeyDown: handleKeyDown, children: [enhancedChild, showSuggestions && filteredSuggestions.length > 0 && (_jsx(ListGroup, { ref: listRef, role: "listbox", className: listClassName, style: {
+                    position: 'absolute',
+                    top: '100%',
+                    left: 0,
+                    right: 0,
+                    zIndex: 1000,
+                    maxHeight: '200px',
+                    overflowY: 'auto',
+                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                    ...listStyle,
+                }, children: filteredSuggestions.map((suggestion, index) => {
+                    const isActive = index === highlightedIndex;
+                    return (_jsx(ListGroup.Item, { role: "option", action: true, active: isActive, "aria-selected": isActive, className: isActive ? activeItemClassName : itemClassName, onMouseDown: (e) => {
+                            e.preventDefault();
+                            selectSuggestion(suggestion);
+                        }, onMouseEnter: () => setHighlightedIndex(index), style: {
+                            cursor: 'pointer',
+                            ...itemStyle,
+                            ...(isActive ? activeItemStyle : undefined),
+                        }, children: suggestion }, suggestion));
+                }) }))] }));
 };

package/dist/components/SelectInput.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import type { FC, JSX } from 'react';
 /**
  * Props for the SelectInput component
  */
@@ -23,6 +23,10 @@ export type SelectInputProps = {
     required?: boolean;
     /** Array of option values to display in bold */
     highlightValues?: string[];
+    /** Function to render the option elements */
+    renderOption?: (option: string, optionKey: string, isHighlighted: boolean) => JSX.Element;
+    /** Sort options in ascending or descending order (default: "desc") */
+    sortOptions?: 'asc' | 'desc' | 'highlight-asc' | 'highlight-desc';
 };
 /**
  * SelectInput - A dropdown select component with react-hook-form integration

package/dist/components/SelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../lib/components/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAI7C;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC9B,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAuF5C,CAAC"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../lib/components/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIlD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC9B,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1F,sEAAsE;IACtE,WAAW,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,eAAe,GAAG,gBAAgB,CAAC;CAClE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA+G5C,CAAC"}

package/dist/components/SelectInput.js

@@ -27,7 +27,7 @@ import { Controller, useFormContext } from 'react-hook-form';
  * />
  * ```
  */
-export const SelectInput = ({ name, label, options = [], helpText = 'Select...', controlSize, value, onChange, disabled = false, required = false, highlightValues = [], }) => {
+export const SelectInput = ({ name, label, options = [], helpText = 'Select...', controlSize, value, onChange, disabled = false, required = false, highlightValues = [], renderOption, sortOptions = 'desc' }) => {
     const formContext = useFormContext();
     const getFieldError = (fieldName) => {
         try {
@@ -43,13 +43,35 @@ export const SelectInput = ({ name, label, options = [], helpText = 'Select...',
     const handleSelectChange = (event) => {
         onChange?.(event.currentTarget.value);
     };
-    const renderOptions = () => (_jsxs(_Fragment, { children: [_jsx("option", { value: "", children: helpText.trim() }), options.map((option) => {
-                const style = highlightValues.includes(option)
-                    ? { fontWeight: 'bold' }
-                    : {};
-                const key = option.replace(/ /g, '');
-                return (_jsx("option", { style: style, value: key, children: option.trim() }, key));
-            })] }));
+    const renderOptionInternal = renderOption || ((option, optionKey, isHighlighted) => {
+        return (_jsx("option", { style: isHighlighted ? { fontWeight: 'bold' } : {}, value: optionKey, children: option }, optionKey));
+    });
+    const renderOptions = () => (_jsxs(_Fragment, { children: [_jsx("option", { value: "", children: helpText.trim() }), options
+                .sort((a, b) => {
+                const aHighlighted = highlightValues.includes(a);
+                const bHighlighted = highlightValues.includes(b);
+                switch (sortOptions) {
+                    case 'asc':
+                        return a.localeCompare(b);
+                    case 'desc':
+                        return b.localeCompare(a);
+                    case 'highlight-asc':
+                        if (aHighlighted && !bHighlighted)
+                            return -1;
+                        if (!aHighlighted && bHighlighted)
+                            return 1;
+                        return a.localeCompare(b);
+                    case 'highlight-desc':
+                        if (aHighlighted && !bHighlighted)
+                            return -1;
+                        if (!aHighlighted && bHighlighted)
+                            return 1;
+                        return b.localeCompare(a);
+                    default:
+                        return 0;
+                }
+            })
+                .map((option) => renderOptionInternal(option, option.replace(/ /g, ''), highlightValues.includes(option)))] }));
     // Integrated with react-hook-form
     if (formContext) {
         return (_jsx(Controller, { name: name, control: formContext.control, rules: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@capyx/components-library",
-	"version": "0.0.10",
+	"version": "0.0.12",
 	"description": "Capyx Components Library for forms across applications",
 	"publishConfig": {
 		"access": "public"
@@ -52,21 +52,20 @@
 	"devDependencies": {
 		"@biomejs/biome": "^2.4.4",
 		"@chromatic-com/storybook": "^5.0.1",
-		"@storybook/addon-a11y": "^10.2.10",
-		"@storybook/addon-docs": "^10.2.10",
-		"@storybook/addon-onboarding": "^10.2.10",
-		"@storybook/addon-vitest": "^10.2.10",
-		"@storybook/react-vite": "^10.2.10",
+		"@storybook/addon-a11y": "^10.2.13",
+		"@storybook/addon-docs": "^10.2.13",
+		"@storybook/addon-onboarding": "^10.2.13",
+		"@storybook/addon-vitest": "^10.2.13",
+		"@storybook/react-vite": "^10.2.13",
 		"@types/dateformat": "^5.0.3",
 		"@types/lodash.debounce": "^4.0.9",
-		"@types/node": "^25.3.0",
+		"@types/node": "^25.3.3",
 		"@types/react": "^19.2.14",
-		"@types/react-autosuggest": "^10.1.11",
 		"@types/react-datepicker": "^7.0.0",
 		"@vitest/browser-playwright": "^4.0.18",
 		"@vitest/coverage-v8": "^4.0.18",
 		"playwright": "^1.58.2",
-		"storybook": "^10.2.10",
+		"storybook": "^10.2.13",
 		"typescript": "^5.9.3",
 		"vitest": "^4.0.18"
 	},
@@ -79,7 +78,6 @@
 		"dayjs": "^1.11.19",
 		"lodash.debounce": "^4.0.8",
 		"react": "^19.2.4",
-		"react-autosuggest": "^10.1.0",
 		"react-bootstrap": "^2.10.10",
 		"react-hook-form": "^7.71.2",
 		"react-quill-new": "^3.8.3"