@julseb-lib/react 0.0.85 → 0.0.87

package/dist/lib/components/Autocomplete/Autocomplete.tsx

@@ -1,12 +1,10 @@
-/*=============================================== Autocomplete component ===============================================*/
-
 import {
-    forwardRef,
     useCallback,
     useMemo,
     useRef,
-    type ChangeEvent,
     memo,
+    type ChangeEvent,
+    type FC,
 } from "react"
 import Fuse from "fuse.js"
 import classNames from "classnames"
@@ -37,316 +35,322 @@ import { StyledAutocomplete } from "./styles"
 import type { ILibAutocomplete } from "./types"
 
 /**
- * @description Returns a Autocomplete component
- * @link https://documentation-components-react.vercel.app/components/autocomplete
- * @extends HTMLInputElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLInputElement>
- * @prop value: string
- * @prop setValue: Dispatch<SetStateAction<string>>
- * @prop listResults: Array<string>
- * @prop emptyText?: string
- * @prop listDirection?: "up" | "down"
- * @prop fuzzyOptions?: IFuseOptions<string> => imported from fuse.js
- * @prop icons?: { left?: string | JSX.Element; clear?: string | JSX.Element }
- * @prop iconSizes?: { left?: number; clear?: number }
- * @prop id?: string
- * @prop label?: string
- * @prop labelComment?: string
- * @prop helper?: string
- * @prop helperBottom?: string | { text: string => only if element is not defined; element: ReactChildren => only if text is not defined; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
- * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
- * @prop iconBaseUrl?: string
- * @prop inputBackground?: "light" | "dark"
- * @prop inputVariant?: "rounded" | "pill"
- * @prop containerStyle?: CSSProperties
- * @prop inputAndListContainerStyle?: CSSProperties
+ * Autocomplete input component with fuzzy search and keyboard navigation.
+ *
+ * @component
+ * @param {Object} props - Autocomplete props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {Ref<HTMLInputElement>} [props.ref] - Ref forwarded to the input element.
+ * @param {string} props.value - Current value of the input.
+ * @param {Dispatch<SetStateAction<string>>} props.setValue - Setter for the input value.
+ * @param {Array<string>} props.listResults - List of possible results to display.
+ * @param {string} [props.emptyText="No result."] - Text to display when there are no results.
+ * @param {"up" | "down"} [props.listDirection] - Direction in which the result list appears.
+ * @param {IFuseOptions<string>} [props.fuzzyOptions] - Options for fuzzy search (from fuse.js).
+ * @param {Object} [props.icons] - Icons for the input ({ left, clear }).
+ * @param {Object} [props.iconSizes] - Sizes for the icons ({ left, clear }).
+ * @param {string} [props.id] - HTML id attribute.
+ * @param {string} [props.label] - Label for the input.
+ * @param {string} [props.labelComment] - Comment for the label.
+ * @param {string} [props.helper] - Helper text above the input.
+ * @param {string|Object} [props.helperBottom] - Helper text or element below the input.
+ * @param {Object} [props.validation] - Validation status and message.
+ * @param {string} [props.iconBaseUrl] - Base URL for icons.
+ * @param {"light" | "dark"} [props.inputBackground] - Input background style.
+ * @param {"rounded" | "pill"} [props.inputVariant="rounded"] - Input variant style.
+ * @param {Array<string>} [props.focusKeys] - Keyboard shortcuts to focus the input.
+ * @param {boolean} [props.showKeys] - Show keyboard shortcut hints.
+ * @param {boolean} [props.disabled] - Disable the input.
+ * @param {CSSProperties} [props.containerStyle] - Style for the outer container.
+ * @param {CSSProperties} [props.inputAndListContainerStyle] - Style for the input and list container.
+ * @returns {JSX.Element} The rendered Autocomplete component.
+ *
+ * @example
+ * <Autocomplete
+ *   value={value}
+ *   setValue={setValue}
+ *   listResults={["Apple", "Banana", "Orange"]}
+ *   label="Fruits"
+ *   icons={{ left: <FruitIcon /> }}
+ * />
  */
 
-const AutocompleteFn = forwardRef<HTMLInputElement, ILibAutocomplete>(
-    (
-        {
-            "data-testid": testid,
-            id,
-            className,
-            label,
-            labelComment,
-            helper,
-            helperBottom,
-            validation,
-            inputBackground,
-            inputVariant = "rounded",
-            value,
-            setValue,
-            listResults,
-            emptyText = "No result.",
-            listDirection,
-            fuzzyOptions = {},
-            icons,
-            iconSizes,
-            iconBaseUrl,
-            focusKeys,
-            showKeys,
-            disabled,
-            containerStyle,
-            inputAndListContainerStyle,
-            ...rest
-        },
-        ref
-    ) => {
-        const hasContainer: boolean = !!(
-            label ||
-            labelComment ||
-            helper ||
-            helperBottom ||
-            validation
-        )
+const AutocompleteFn: FC<ILibAutocomplete> = ({
+    "data-testid": testid,
+    ref,
+    id,
+    className,
+    label,
+    labelComment,
+    helper,
+    helperBottom,
+    validation,
+    inputBackground,
+    inputVariant = "rounded",
+    value,
+    setValue,
+    listResults,
+    emptyText = "No result.",
+    listDirection,
+    fuzzyOptions = {},
+    icons,
+    iconSizes,
+    iconBaseUrl,
+    focusKeys,
+    showKeys,
+    disabled,
+    containerStyle,
+    inputAndListContainerStyle,
+    ...rest
+}) => {
+    const hasContainer: boolean = !!(
+        label ||
+        labelComment ||
+        helper ||
+        helperBottom ||
+        validation
+    )
 
-        const defaultIconSizes = { left: 16, clear: 16 }
+    const defaultIconSizes = { left: 16, clear: 16 }
 
-        const isTouchScreen = useTouchScreen()
+    const isTouchScreen = useTouchScreen()
 
-        const inputRef = useRef<HTMLDivElement>(null)
-        const keys = focusKeys || [""]
-        useKeyPress(
-            keys,
-            useCallback(() => inputRef?.current?.focus(), [])
-        )
+    const inputRef = useRef<HTMLDivElement>(null)
+    const keys = focusKeys || [""]
+    useKeyPress(
+        keys,
+        useCallback(() => inputRef?.current?.focus(), [])
+    )
 
-        const fuzzyResults = useMemo(() => {
-            const fuse = new Fuse(listResults, fuzzyOptions)
+    const fuzzyResults = useMemo(() => {
+        const fuse = new Fuse(listResults, fuzzyOptions)
 
-            return fuse
-                .search(value)
-                ?.slice(0, 20)
-                ?.map(res => res.item)
-        }, [fuzzyOptions, listResults, value])
+        return fuse
+            .search(value)
+            ?.slice(0, 20)
+            ?.map(res => res.item)
+    }, [fuzzyOptions, listResults, value])
 
-        const { isOpen, setIsOpen, cursor, listRef } = useKeyboardNavigation<
-            typeof fuzzyResults
-        >({
-            data: fuzzyResults,
-            value,
-            setValue,
-        })
+    const { isOpen, setIsOpen, cursor, listRef } = useKeyboardNavigation<
+        typeof fuzzyResults
+    >({
+        data: fuzzyResults,
+        value,
+        setValue,
+    })
 
-        const handleChange = useCallback(
-            (e: ChangeEvent<HTMLInputElement>) => {
-                setValue(e.target.value)
-            },
-            [setValue]
-        )
-        const handleClear = useCallback(() => {
-            setValue("")
-        }, [setValue])
-        const handleSelectValue = useCallback(
-            (value: string) => {
-                setValue(value)
-            },
-            [setValue]
-        )
+    const handleChange = useCallback(
+        (e: ChangeEvent<HTMLInputElement>) => {
+            setValue(e.target.value)
+        },
+        [setValue]
+    )
+    const handleClear = useCallback(() => {
+        setValue("")
+    }, [setValue])
+    const handleSelectValue = useCallback(
+        (value: string) => {
+            setValue(value)
+        },
+        [setValue]
+    )
 
-        const handleOpen = useCallback(() => {
-            setIsOpen(true)
-        }, [setIsOpen])
-        const handleClose = useCallback(
-            () =>
-                setTimeout(() => {
-                    setIsOpen(false)
-                }, 100),
-            [setIsOpen]
-        )
+    const handleOpen = useCallback(() => {
+        setIsOpen(true)
+    }, [setIsOpen])
+    const handleClose = useCallback(
+        () =>
+            setTimeout(() => {
+                setIsOpen(false)
+            }, 100),
+        [setIsOpen]
+    )
 
-        return (
-            <InputContainer
+    return (
+        <InputContainer
+            data-testid={testid}
+            className={className}
+            id={id}
+            label={label}
+            labelComment={labelComment}
+            helper={helper}
+            helperBottom={helperBottom}
+            validation={validation}
+            value={value}
+            counter={false}
+            maxLength={undefined}
+            style={containerStyle}
+            hasListOpen={isOpen}
+            iconBaseUrl={iconBaseUrl}
+        >
+            <InputAndListContainer
                 data-testid={testid}
                 className={className}
-                id={id}
-                label={label}
-                labelComment={labelComment}
-                helper={helper}
-                helperBottom={helperBottom}
-                validation={validation}
-                value={value}
-                counter={false}
-                maxLength={undefined}
-                style={containerStyle}
                 hasListOpen={isOpen}
-                iconBaseUrl={iconBaseUrl}
+                inputAndListContainerStyle={inputAndListContainerStyle}
+                isParent={!hasContainer}
             >
-                <InputAndListContainer
+                <InputWrapper
                     data-testid={testid}
                     className={className}
+                    hasContainer={hasContainer}
                     hasListOpen={isOpen}
-                    inputAndListContainerStyle={inputAndListContainerStyle}
-                    isParent={!hasContainer}
+                    isTextArea={false}
+                    inputVariant={inputVariant}
+                    inputBackground={inputBackground}
+                    validationStatus={validation?.status}
                 >
-                    <InputWrapper
-                        data-testid={testid}
-                        className={className}
-                        hasContainer={hasContainer}
-                        hasListOpen={isOpen}
-                        isTextArea={false}
-                        inputVariant={inputVariant}
-                        inputBackground={inputBackground}
-                        validationStatus={validation?.status}
-                    >
-                        {icons?.left && (
-                            <InputLeftContainer
+                    {icons?.left && (
+                        <InputLeftContainer
+                            data-testid={testid}
+                            className={className}
+                            disabled={disabled}
+                        >
+                            <InputIcon
                                 data-testid={testid}
                                 className={className}
+                                icon={icons.left}
+                                iconSize={
+                                    iconSizes?.left || defaultIconSizes.left
+                                }
+                                validationStatus={validation?.status}
                                 disabled={disabled}
-                            >
-                                <InputIcon
+                                inputBackground={inputBackground}
+                                inputVariant={inputVariant}
+                                iconBaseUrl={iconBaseUrl}
+                            />
+                        </InputLeftContainer>
+                    )}
+
+                    <StyledAutocomplete
+                        data-testid={testid && `${testid}.Input`}
+                        className={classNames(
+                            { Input: className },
+                            { WithListOpen: isOpen }
+                        )}
+                        ref={useMergeRefs([ref, inputRef])}
+                        id={id}
+                        value={value}
+                        disabled={disabled}
+                        onChange={handleChange}
+                        type="search"
+                        onFocus={handleOpen}
+                        onBlur={handleClose}
+                        $disabled={disabled}
+                        $validationStatus={validation?.status}
+                        $inputBackground={inputBackground}
+                        $inputVariant={inputVariant}
+                        {...rest}
+                    />
+
+                    {(value.length || validation || showKeys) && (
+                        <InputRightContainer
+                            data-testid={testid}
+                            className={className}
+                            disabled={disabled}
+                            withPadding
+                            withBorder={false}
+                        >
+                            {value.length ? (
+                                <InputButton
                                     data-testid={testid}
                                     className={className}
-                                    icon={icons.left}
+                                    onClick={handleClear}
+                                    icon={
+                                        icons?.clear || (
+                                            <Close
+                                                data-testid={
+                                                    testid &&
+                                                    `${testid}.Button.Icon`
+                                                }
+                                                className={
+                                                    className && "ClearIcon"
+                                                }
+                                                size={
+                                                    iconSizes?.clear ||
+                                                    defaultIconSizes.clear
+                                                }
+                                            />
+                                        )
+                                    }
                                     iconSize={
-                                        iconSizes?.left || defaultIconSizes.left
+                                        iconSizes?.clear ||
+                                        defaultIconSizes.clear
                                     }
-                                    validationStatus={validation?.status}
-                                    disabled={disabled}
                                     inputBackground={inputBackground}
-                                    inputVariant={inputVariant}
-                                    iconBaseUrl={iconBaseUrl}
+                                    disabled={disabled}
+                                    aria-label="Clear"
+                                    validationStatus={validation?.status}
                                 />
-                            </InputLeftContainer>
-                        )}
-
-                        <StyledAutocomplete
-                            data-testid={testid && `${testid}.Input`}
-                            className={classNames(
-                                { Input: className },
-                                { WithListOpen: isOpen }
-                            )}
-                            ref={useMergeRefs([ref, inputRef])}
-                            id={id}
-                            value={value}
-                            disabled={disabled}
-                            onChange={handleChange}
-                            type="search"
-                            onFocus={handleOpen}
-                            onBlur={handleClose}
-                            $disabled={disabled}
-                            $validationStatus={validation?.status}
-                            $inputBackground={inputBackground}
-                            $inputVariant={inputVariant}
-                            {...rest}
-                        />
+                            ) : null}
 
-                        {(value.length || validation || showKeys) && (
-                            <InputRightContainer
-                                data-testid={testid}
-                                className={className}
-                                disabled={disabled}
-                                withPadding
-                                withBorder={false}
-                            >
-                                {value.length ? (
-                                    <InputButton
-                                        data-testid={testid}
-                                        className={className}
-                                        onClick={handleClear}
-                                        icon={
-                                            icons?.clear || (
-                                                <Close
-                                                    data-testid={
-                                                        testid &&
-                                                        `${testid}.Button.Icon`
-                                                    }
-                                                    className={
-                                                        className && "ClearIcon"
-                                                    }
-                                                    size={
-                                                        iconSizes?.clear ||
-                                                        defaultIconSizes.clear
-                                                    }
-                                                />
-                                            )
-                                        }
-                                        iconSize={
-                                            iconSizes?.clear ||
-                                            defaultIconSizes.clear
-                                        }
-                                        inputBackground={inputBackground}
-                                        disabled={disabled}
-                                        aria-label="Clear"
-                                        validationStatus={validation?.status}
-                                    />
-                                ) : null}
-
-                                {showKeys &&
-                                    focusKeys &&
-                                    !isTouchScreen &&
-                                    !disabled && (
-                                        <Key
-                                            data-testid={
-                                                testid && `${testid}.Keys`
-                                            }
-                                            className={className && "Keys"}
-                                            keys={transformSearchKeys(keys)}
-                                        />
-                                    )}
-
-                                {validation && (
-                                    <InputValidationIcon
-                                        data-testid={testid}
-                                        className={className}
-                                        validation={validation}
-                                        inputBackground={inputBackground}
+                            {showKeys &&
+                                focusKeys &&
+                                !isTouchScreen &&
+                                !disabled && (
+                                    <Key
+                                        data-testid={testid && `${testid}.Keys`}
+                                        className={className && "Keys"}
+                                        keys={transformSearchKeys(keys)}
                                     />
                                 )}
-                            </InputRightContainer>
-                        )}
-                    </InputWrapper>
 
-                    <ListInput
-                        data-testid={testid}
-                        className={className}
-                        direction={listDirection}
-                        inputBackground={inputBackground}
-                        inputVariant={inputVariant}
-                        validationStatus={validation?.status}
-                        isOpen={!!(value && isOpen)}
-                        ref={listRef}
-                    >
-                        {fuzzyResults?.length ? (
-                            <>
-                                {fuzzyResults.map((result, i) => (
-                                    <ListInputItem
-                                        data-testid={testid}
-                                        className={className}
-                                        validationStatus={validation?.status}
-                                        inputBackground={inputBackground}
-                                        onClick={() =>
-                                            handleSelectValue(result)
-                                        }
-                                        isActive={i === cursor}
-                                        isHovered={value === result}
-                                        key={uuid()}
-                                    >
-                                        <Highlight highlightedText={value}>
-                                            {result}
-                                        </Highlight>
-                                    </ListInputItem>
-                                ))}
-                            </>
-                        ) : (
-                            <ListInputItem
-                                data-testid={testid}
-                                className={className}
-                                validationStatus={validation?.status}
-                                inputBackground={inputBackground}
-                                readOnly
-                            >
-                                {emptyText}
-                            </ListInputItem>
-                        )}
-                    </ListInput>
-                </InputAndListContainer>
-            </InputContainer>
-        )
-    }
-)
+                            {validation && (
+                                <InputValidationIcon
+                                    data-testid={testid}
+                                    className={className}
+                                    validation={validation}
+                                    inputBackground={inputBackground}
+                                />
+                            )}
+                        </InputRightContainer>
+                    )}
+                </InputWrapper>
+
+                <ListInput
+                    data-testid={testid}
+                    className={className}
+                    direction={listDirection}
+                    inputBackground={inputBackground}
+                    inputVariant={inputVariant}
+                    validationStatus={validation?.status}
+                    isOpen={!!(value && isOpen)}
+                    ref={listRef}
+                >
+                    {fuzzyResults?.length ? (
+                        <>
+                            {fuzzyResults.map((result, i) => (
+                                <ListInputItem
+                                    data-testid={testid}
+                                    className={className}
+                                    validationStatus={validation?.status}
+                                    inputBackground={inputBackground}
+                                    onClick={() => handleSelectValue(result)}
+                                    isActive={i === cursor}
+                                    isHovered={value === result}
+                                    key={uuid()}
+                                >
+                                    <Highlight highlightedText={value}>
+                                        {result}
+                                    </Highlight>
+                                </ListInputItem>
+                            ))}
+                        </>
+                    ) : (
+                        <ListInputItem
+                            data-testid={testid}
+                            className={className}
+                            validationStatus={validation?.status}
+                            inputBackground={inputBackground}
+                            readOnly
+                        >
+                            {emptyText}
+                        </ListInputItem>
+                    )}
+                </ListInput>
+            </InputAndListContainer>
+        </InputContainer>
+    )
+}
 
 export const Autocomplete = memo(AutocompleteFn)

package/dist/lib/components/Autocomplete/index.ts

@@ -1,3 +1 @@
-/*=============================================== Autocomplete exports ===============================================*/
-
 export * from "./Autocomplete"

package/dist/lib/components/Autocomplete/styles.tsx

@@ -1,5 +1,3 @@
-/*=============================================== Autocomplete styles ===============================================*/
-
 import styled from "styled-components"
 import { setDefaultTheme } from "../../"
 import { InputBaseMixin, type ILibInputBaseMixin } from "../ComponentsMixins"

package/dist/lib/components/Autocomplete/types.ts

@@ -1,6 +1,4 @@
-/*=============================================== Autocomplete types ===============================================*/
-
-import type { InputHTMLAttributes } from "react"
+import type { InputHTMLAttributes, Ref } from "react"
 import type { IFuseOptions } from "fuse.js"
 import type { LibIcon, LibInputListDirection, DispatchState } from "../../types"
 import type {
@@ -11,6 +9,7 @@ import type {
 type ILibAutocompleteBase = InputHTMLAttributes<HTMLInputElement> &
     ILibInputBase &
     LibInputWithValidation & {
+        ref?: Ref<HTMLInputElement>
         value: string
         setValue: DispatchState<string>
         listResults: Array<string>