@julseb-lib/react 0.0.85 → 0.0.86

package/dist/lib/components/Input/templates/SearchInput.tsx

@@ -1,6 +1,4 @@
-/*=============================================== SearchInput component ===============================================*/
-
-import { forwardRef, useRef, useCallback } from "react"
+import { useRef, useCallback, type FC } from "react"
 import { Key, useKeyPress, useMergeRefs, useTouchScreen } from "../../.."
 import {
     InputButton,
@@ -14,127 +12,121 @@ import { transformSearchKeys } from "../../../lib-utils"
 import { StyledInput } from "../styles"
 import type { ILibSearchInput } from "../subtypes"
 
-export const SearchInput = forwardRef<HTMLInputElement, ILibSearchInput>(
-    (
-        {
-            "data-testid": testid,
-            id,
-            label,
-            helper,
-            helperBottom,
-            inputBackground,
-            inputVariant = "rounded",
-            className,
-            disabled,
-            clearSearch,
-            iconClearSize = 24,
-            iconClear = (
-                <Close
-                    data-testid={testid && `${testid}.Button.Icon`}
-                    className={className && "Icon"}
-                    size={iconClearSize}
-                />
-            ),
-            icon,
-            iconSize,
-            iconBaseUrl,
-            focusKeys,
-            showKeys,
-            value,
-            prefix,
-            ...rest
-        },
-        ref
-    ) => {
-        const isTouchScreen = useTouchScreen()
+export const SearchInput: FC<ILibSearchInput> = ({
+    "data-testid": testid,
+    ref,
+    id,
+    label,
+    helper,
+    helperBottom,
+    inputBackground,
+    inputVariant = "rounded",
+    className,
+    disabled,
+    clearSearch,
+    iconClearSize = 24,
+    iconClear = (
+        <Close
+            data-testid={testid && `${testid}.Button.Icon`}
+            className={className && "Icon"}
+            size={iconClearSize}
+        />
+    ),
+    icon,
+    iconSize,
+    iconBaseUrl,
+    focusKeys,
+    showKeys,
+    value,
+    prefix,
+    ...rest
+}) => {
+    const isTouchScreen = useTouchScreen()
+
+    const inputRef = useRef<HTMLInputElement>(null)
 
-        const inputRef = useRef<HTMLInputElement>(null)
+    const handleFocus = useCallback(() => inputRef?.current?.focus(), [])
 
-        const handleFocus = useCallback(() => inputRef?.current?.focus(), [])
+    const keys = focusKeys || [""]
+    useKeyPress(keys, () => handleFocus())
 
-        const keys = focusKeys || [""]
-        useKeyPress(keys, () => handleFocus())
+    return (
+        <>
+            {(prefix || icon) && (
+                <InputLeftContainer
+                    data-testid={testid}
+                    className={className}
+                    disabled={disabled}
+                >
+                    <InputPrefix
+                        data-testid={testid}
+                        className={className}
+                        prefix={prefix}
+                        inputBackground={inputBackground}
+                    />
 
-        return (
-            <>
-                {(prefix || icon) && (
-                    <InputLeftContainer
+                    <InputIcon
                         data-testid={testid}
                         className={className}
+                        icon={icon}
+                        iconSize={iconSize}
+                        validationStatus={undefined}
                         disabled={disabled}
-                    >
-                        <InputPrefix
-                            data-testid={testid}
-                            className={className}
-                            prefix={prefix}
-                            inputBackground={inputBackground}
-                        />
+                        inputBackground={inputBackground}
+                        inputVariant={inputVariant}
+                        iconBaseUrl={iconBaseUrl}
+                    />
+                </InputLeftContainer>
+            )}
 
-                        <InputIcon
+            <StyledInput
+                data-testid={testid && `${testid}.Input`}
+                id={id}
+                className={className && "Input"}
+                ref={useMergeRefs([ref, inputRef])}
+                disabled={disabled}
+                value={value}
+                prefix={undefined as any}
+                $inputBackground={inputBackground}
+                $inputVariant={inputVariant}
+                $disabled={disabled}
+                $validationStatus={undefined}
+                {...rest}
+            />
+
+            {(clearSearch || (showKeys && !isTouchScreen)) && (
+                <InputRightContainer
+                    data-testid={testid}
+                    className={className}
+                    disabled={disabled}
+                    withPadding
+                    withBorder={false}
+                >
+                    {clearSearch && value && value.toString().length > 0 && (
+                        <InputButton
                             data-testid={testid}
                             className={className}
-                            icon={icon}
-                            iconSize={iconSize}
-                            validationStatus={undefined}
-                            disabled={disabled}
+                            icon={iconClear}
+                            iconSize={iconClearSize}
                             inputBackground={inputBackground}
-                            inputVariant={inputVariant}
+                            disabled={disabled}
+                            aria-label="Clear"
+                            onClick={clearSearch}
+                            validationStatus={undefined}
                             iconBaseUrl={iconBaseUrl}
                         />
-                    </InputLeftContainer>
-                )}
-
-                <StyledInput
-                    data-testid={testid && `${testid}.Input`}
-                    id={id}
-                    className={className && "Input"}
-                    ref={useMergeRefs([ref, inputRef])}
-                    disabled={disabled}
-                    value={value}
-                    prefix={undefined as any}
-                    $inputBackground={inputBackground}
-                    $inputVariant={inputVariant}
-                    $disabled={disabled}
-                    $validationStatus={undefined}
-                    {...rest}
-                />
+                    )}
 
-                {(clearSearch || (showKeys && !isTouchScreen)) && (
-                    <InputRightContainer
-                        data-testid={testid}
-                        className={className}
-                        disabled={disabled}
-                        withPadding
-                        withBorder={false}
-                    >
-                        {clearSearch &&
-                            value &&
-                            value.toString().length > 0 && (
-                                <InputButton
-                                    data-testid={testid}
-                                    className={className}
-                                    icon={iconClear}
-                                    iconSize={iconClearSize}
-                                    inputBackground={inputBackground}
-                                    disabled={disabled}
-                                    aria-label="Clear"
-                                    onClick={clearSearch}
-                                    validationStatus={undefined}
-                                    iconBaseUrl={iconBaseUrl}
-                                />
-                            )}
-
-                        {showKeys && !isTouchScreen && (
-                            <Key
-                                data-testid={testid && `${testid}.Keys`}
-                                keys={transformSearchKeys(keys)}
-                                accentColor="primary"
-                                className={className && "Keys"}
-                            />
-                        )}
-                    </InputRightContainer>
-                )}
-            </>
-        )
-    }
-)
+                    {showKeys && !isTouchScreen && (
+                        <Key
+                            data-testid={testid && `${testid}.Keys`}
+                            keys={transformSearchKeys(keys)}
+                            accentColor="primary"
+                            className={className && "Keys"}
+                        />
+                    )}
+                </InputRightContainer>
+            )}
+        </>
+    )
+}

package/dist/lib/components/Input/templates/SelectInput.tsx

@@ -1,6 +1,4 @@
-/*=============================================== SelectInput component ===============================================*/
-
-import { forwardRef, useRef } from "react"
+import { useRef, type FC } from "react"
 import { useMergeRefs } from "../../../hooks"
 import { CaretDown } from "../../../icons"
 import {
@@ -13,104 +11,100 @@ import {
 import { StyledInput } from "../styles"
 import type { ILibSelectInput } from "../subtypes"
 
-export const SelectInput = forwardRef<HTMLSelectElement, ILibSelectInput>(
-    (
-        {
-            "data-testid": testid,
-            id,
-            label,
-            helper,
-            helperBottom,
-            validation,
-            inputBackground,
-            inputVariant = "rounded",
-            className,
-            disabled,
-            children,
-            iconSelectSize = 12,
-            iconSelect = (
-                <CaretDown
-                    data-testid={testid && `${testid}.Button.Icon`}
-                    className={className && "Icon"}
-                    size={iconSelectSize}
-                />
-            ),
-            icon,
-            iconSize,
-            iconBaseUrl,
-            prefix,
-            ...rest
-        },
-        ref
-    ) => {
-        const inputRef = useRef<HTMLSelectElement>(null)
-
-        return (
-            <>
-                {(prefix || icon) && (
-                    <InputLeftContainer
-                        data-testid={testid}
-                        className={className}
-                        disabled={disabled}
-                    >
-                        <InputPrefix
-                            data-testid={testid}
-                            className={className}
-                            prefix={prefix}
-                            inputBackground={inputBackground}
-                        />
+export const SelectInput: FC<ILibSelectInput> = ({
+    "data-testid": testid,
+    ref,
+    id,
+    label,
+    helper,
+    helperBottom,
+    validation,
+    inputBackground,
+    inputVariant = "rounded",
+    className,
+    disabled,
+    children,
+    iconSelectSize = 12,
+    iconSelect = (
+        <CaretDown
+            data-testid={testid && `${testid}.Button.Icon`}
+            className={className && "Icon"}
+            size={iconSelectSize}
+        />
+    ),
+    icon,
+    iconSize,
+    iconBaseUrl,
+    prefix,
+    ...rest
+}) => {
+    const inputRef = useRef<HTMLSelectElement>(null)
 
-                        <InputIcon
-                            data-testid={testid}
-                            className={className}
-                            icon={icon}
-                            iconSize={iconSize}
-                            validationStatus={validation?.status}
-                            disabled={disabled}
-                            inputBackground={inputBackground}
-                            inputVariant={inputVariant}
-                            iconBaseUrl={iconBaseUrl}
-                        />
-                    </InputLeftContainer>
-                )}
-
-                <StyledInput
-                    as="select"
-                    data-testid={testid && `${testid}.Select`}
-                    id={id}
-                    className={className && "Select"}
-                    ref={useMergeRefs([inputRef as any, ref as any]) as any}
-                    disabled={disabled}
-                    $inputBackground={inputBackground}
-                    $inputVariant={inputVariant}
-                    $disabled={disabled}
-                    $validationStatus={validation?.status}
-                    $isSelect
-                    {...rest}
-                >
-                    {children}
-                </StyledInput>
-
-                <InputRightContainer
+    return (
+        <>
+            {(prefix || icon) && (
+                <InputLeftContainer
                     data-testid={testid}
                     className={className}
                     disabled={disabled}
-                    withBorder={false}
-                    withPadding
                 >
-                    <InputButton
+                    <InputPrefix
                         data-testid={testid}
                         className={className}
-                        aria-label="Caret"
+                        prefix={prefix}
+                        inputBackground={inputBackground}
+                    />
+
+                    <InputIcon
+                        data-testid={testid}
+                        className={className}
+                        icon={icon}
+                        iconSize={iconSize}
+                        validationStatus={validation?.status}
                         disabled={disabled}
                         inputBackground={inputBackground}
-                        icon={iconSelect}
-                        iconSize={iconSelectSize}
+                        inputVariant={inputVariant}
                         iconBaseUrl={iconBaseUrl}
-                        validationStatus={undefined}
                     />
-                </InputRightContainer>
-            </>
-        )
-    }
-)
+                </InputLeftContainer>
+            )}
+
+            <StyledInput
+                as="select"
+                data-testid={testid && `${testid}.Select`}
+                id={id}
+                className={className && "Select"}
+                ref={useMergeRefs([inputRef as any, ref as any]) as any}
+                disabled={disabled}
+                $inputBackground={inputBackground}
+                $inputVariant={inputVariant}
+                $disabled={disabled}
+                $validationStatus={validation?.status}
+                $isSelect
+                {...rest}
+            >
+                {children}
+            </StyledInput>
+
+            <InputRightContainer
+                data-testid={testid}
+                className={className}
+                disabled={disabled}
+                withBorder={false}
+                withPadding
+            >
+                <InputButton
+                    data-testid={testid}
+                    className={className}
+                    aria-label="Caret"
+                    disabled={disabled}
+                    inputBackground={inputBackground}
+                    icon={iconSelect}
+                    iconSize={iconSelectSize}
+                    iconBaseUrl={iconBaseUrl}
+                    validationStatus={undefined}
+                />
+            </InputRightContainer>
+        </>
+    )
+}

package/dist/lib/components/Input/templates/TextInput.tsx

@@ -1,6 +1,4 @@
-/*=============================================== TextInput component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import {
     InputIcon,
     InputRightContainer,
@@ -12,105 +10,101 @@ import {
 import { StyledInput } from "../styles"
 import type { ILibTextInput } from "../subtypes"
 
-export const TextInput = forwardRef<HTMLInputElement, ILibTextInput>(
-    (
-        {
-            "data-testid": testid,
-            id,
-            label,
-            labelComment,
-            helper,
-            helperBottom,
-            validation,
-            inputBackground,
-            inputVariant = "rounded",
-            className,
-            disabled,
-            value,
-            maxLength,
-            counter,
-            type = "text",
-            icon,
-            iconSize,
-            iconBaseUrl,
-            prefix,
-            suffix,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <>
-                {(prefix || icon) && (
-                    <InputLeftContainer
+export const TextInput: FC<ILibTextInput> = ({
+    "data-testid": testid,
+    ref,
+    id,
+    label,
+    labelComment,
+    helper,
+    helperBottom,
+    validation,
+    inputBackground,
+    inputVariant = "rounded",
+    className,
+    disabled,
+    value,
+    maxLength,
+    counter,
+    type = "text",
+    icon,
+    iconSize,
+    iconBaseUrl,
+    prefix,
+    suffix,
+    ...rest
+}) => {
+    return (
+        <>
+            {(prefix || icon) && (
+                <InputLeftContainer
+                    data-testid={testid}
+                    className={className}
+                    disabled={disabled}
+                >
+                    <InputPrefix
                         data-testid={testid}
                         className={className}
-                        disabled={disabled}
-                    >
-                        <InputPrefix
-                            data-testid={testid}
-                            className={className}
-                            prefix={prefix}
-                            inputBackground={inputBackground}
-                        />
+                        prefix={prefix}
+                        inputBackground={inputBackground}
+                    />
 
-                        <InputIcon
-                            data-testid={testid}
-                            className={className}
-                            icon={icon}
-                            iconSize={iconSize}
-                            validationStatus={validation?.status}
-                            disabled={disabled}
-                            inputBackground={inputBackground}
-                            inputVariant={inputVariant}
-                            iconBaseUrl={iconBaseUrl}
-                        />
-                    </InputLeftContainer>
-                )}
-
-                <StyledInput
-                    data-testid={testid && `${testid}.Input`}
-                    id={id}
-                    className={className && "Input"}
-                    ref={ref}
-                    value={value}
-                    maxLength={maxLength}
-                    disabled={disabled}
-                    type={type}
-                    prefix={undefined as any}
-                    $inputBackground={inputBackground}
-                    $inputVariant={inputVariant}
-                    $disabled={disabled}
-                    $validationStatus={validation?.status}
-                    {...rest}
-                />
-
-                {(validation || suffix) && (
-                    <InputRightContainer
+                    <InputIcon
                         data-testid={testid}
                         className={className}
+                        icon={icon}
+                        iconSize={iconSize}
+                        validationStatus={validation?.status}
                         disabled={disabled}
-                        withPadding={validation && !suffix}
-                        withBorder={!!(suffix && !validation)}
-                    >
-                        {validation && (
-                            <InputValidationIcon
-                                data-testid={testid}
-                                className={className}
-                                validation={validation}
-                                inputBackground={inputBackground}
-                            />
-                        )}
+                        inputBackground={inputBackground}
+                        inputVariant={inputVariant}
+                        iconBaseUrl={iconBaseUrl}
+                    />
+                </InputLeftContainer>
+            )}
+
+            <StyledInput
+                data-testid={testid && `${testid}.Input`}
+                id={id}
+                className={className && "Input"}
+                ref={ref}
+                value={value}
+                maxLength={maxLength}
+                disabled={disabled}
+                type={type}
+                prefix={undefined as any}
+                $inputBackground={inputBackground}
+                $inputVariant={inputVariant}
+                $disabled={disabled}
+                $validationStatus={validation?.status}
+                {...rest}
+            />
 
-                        <InputSuffix
+            {(validation || suffix) && (
+                <InputRightContainer
+                    data-testid={testid}
+                    className={className}
+                    disabled={disabled}
+                    withPadding={validation && !suffix}
+                    withBorder={!!(suffix && !validation)}
+                >
+                    {validation && (
+                        <InputValidationIcon
                             data-testid={testid}
                             className={className}
-                            suffix={suffix}
+                            validation={validation}
                             inputBackground={inputBackground}
                         />
-                    </InputRightContainer>
-                )}
-            </>
-        )
-    }
-)
+                    )}
+
+                    <InputSuffix
+                        data-testid={testid}
+                        className={className}
+                        suffix={suffix}
+                        inputBackground={inputBackground}
+                    />
+                </InputRightContainer>
+            )}
+        </>
+    )
+}