@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/InputComponents/components/InputButton.tsx

@@ -1,5 +1,4 @@
-/*=============================================== InputButton component ===============================================*/
-
+import type { FC } from "react"
 import { LibIcon } from "../../LibIcon"
 import { StyledInputButton } from "../styles"
 import type { ILibInputButton } from "../types"
@@ -19,7 +18,7 @@ import type { ILibInputButton } from "../types"
  * @prop validationStatus: boolean | undefined | undefined
  * @prop className: string | undefined
  */
-export const InputButton = ({
+export const InputButton: FC<ILibInputButton> = ({
     "data-testid": testid,
     "aria-label": ariaLabel,
     onClick,
@@ -31,7 +30,7 @@ export const InputButton = ({
     inputBackground,
     validationStatus,
     className,
-}: ILibInputButton) => {
+}) => {
     return (
         <StyledInputButton
             aria-label={ariaLabel}

package/dist/lib/components/InputComponents/components/InputContainer.tsx

@@ -1,5 +1,4 @@
-/*=============================================== InputContainer component ===============================================*/
-
+import type { FC } from "react"
 import { InputContainer as Container } from "../../InputContainer"
 import type { ILibInputContainer } from "../../InputContainer/types"
 
@@ -20,7 +19,7 @@ import type { ILibInputContainer } from "../../InputContainer/types"
  * @prop style: CSSProperties | undefined
  * @prop iconBaseUrl: string | undefined
  */
-export const InputContainer = ({
+export const InputContainer: FC<ILibInputContainer> = ({
     "data-testid": testid,
     id,
     label,
@@ -36,7 +35,7 @@ export const InputContainer = ({
     hasListOpen,
     iconBaseUrl,
     style,
-}: ILibInputContainer) => {
+}) => {
     if (
         !label &&
         !labelComment &&

package/dist/lib/components/InputComponents/components/InputIcon.tsx

@@ -1,5 +1,4 @@
-/*=============================================== InputIconComponent ===============================================*/
-
+import type { FC } from "react"
 import { LibIcon } from "../../LibIcon"
 import { StyledInputIconContainer } from "../styles"
 import type { ILibInputIconContainer } from "../types"
@@ -17,7 +16,7 @@ import type { ILibInputIconContainer } from "../types"
  * @prop inputBackground: "light" | "dark" | undefined
  * @prop inputVariant: "rounded" | "pill" | undefined
  */
-export const InputIcon = ({
+export const InputIcon: FC<ILibInputIconContainer> = ({
     "data-testid": testid,
     className,
     icon,
@@ -27,7 +26,7 @@ export const InputIcon = ({
     inputBackground,
     disabled,
     inputVariant,
-}: ILibInputIconContainer) => {
+}) => {
     if (!icon) return null
 
     return (

package/dist/lib/components/InputComponents/components/InputLeftContainer.tsx

@@ -1,6 +1,4 @@
-/*=============================================== InputLeftContainer component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledInputLeftContainer } from "../styles"
 import type { ILibInputLeftContainer } from "../types"
 
@@ -12,18 +10,19 @@ import type { ILibInputLeftContainer } from "../types"
  * @prop children?: ReactChildren
  * @prop disabled: boolean | undefined
  */
-export const InputLeftContainer = forwardRef<
-    HTMLSpanElement,
-    ILibInputLeftContainer
->(({ "data-testid": testid, className, children, disabled }, ref) => {
+export const InputLeftContainer: FC<ILibInputLeftContainer> = ({
+    "data-testid": testid,
+    className,
+    children,
+    disabled,
+}) => {
     return (
         <StyledInputLeftContainer
             data-testid={testid && `${testid}.LeftContainer`}
-            ref={ref}
             className={className && "LeftContainer"}
             $disabled={disabled}
         >
             {children}
         </StyledInputLeftContainer>
     )
-})
+}

package/dist/lib/components/InputComponents/components/InputPrefix.tsx

@@ -1,5 +1,4 @@
-/*=============================================== InputPrefix component ===============================================*/
-
+import type { FC } from "react"
 import { StyledInputPrefix } from "../styles"
 import type { ILibInputPrefix } from "../types"
 
@@ -11,12 +10,12 @@ import type { ILibInputPrefix } from "../types"
  * @prop inputBackground: "light" | "dark" | undefined
  * @prop prefix: string | JSX.Element | undefined
  */
-export const InputPrefix = ({
+export const InputPrefix: FC<ILibInputPrefix> = ({
     "data-testid": testid,
     className,
     prefix,
     inputBackground,
-}: ILibInputPrefix) => {
+}) => {
     if (!prefix) return null
 
     return (

package/dist/lib/components/InputComponents/components/InputRightContainer.tsx

@@ -1,5 +1,4 @@
-/*=============================================== InputRightContainer component ===============================================*/
-
+import type { FC } from "react"
 import { StyledInputRightContainer } from "../styles"
 import type { ILibInputRightContainer } from "../types"
 
@@ -13,14 +12,14 @@ import type { ILibInputRightContainer } from "../types"
  * @prop withBorder: boolean | undefined
  * @prop children?: ReactChildren
  */
-export const InputRightContainer = ({
+export const InputRightContainer: FC<ILibInputRightContainer> = ({
     "data-testid": testid,
     className,
     children,
     disabled,
     withPadding,
     withBorder,
-}: ILibInputRightContainer) => {
+}) => {
     return (
         <StyledInputRightContainer
             data-testid={testid && `${testid}.RightContainer`}

package/dist/lib/components/InputComponents/components/InputSuffix.tsx

@@ -1,5 +1,4 @@
-/*=============================================== InputSuffix component ===============================================*/
-
+import type { FC } from "react"
 import { StyledInputSuffix } from "../styles"
 import type { ILibInputSuffix } from "../types"
 
@@ -11,12 +10,12 @@ import type { ILibInputSuffix } from "../types"
  * @prop inputBackground: "light" | "dark" | undefined
  * @prop prefix: string | JSX.Element | undefined
  */
-export const InputSuffix = ({
+export const InputSuffix: FC<ILibInputSuffix> = ({
     "data-testid": testid,
     className,
     suffix,
     inputBackground,
-}: ILibInputSuffix) => {
+}) => {
     if (!suffix) return null
 
     return (

package/dist/lib/components/InputComponents/components/InputValidationHelper.tsx

@@ -1,5 +1,4 @@
-/*=============================================== InputValidationHelper component ===============================================*/
-
+import type { FC } from "react"
 import { getIconSizeFromFont } from "../../../lib-utils"
 import { LibIcon } from "../../LibIcon"
 import { CloseCircle, CheckCircle } from "../../../icons"
@@ -17,11 +16,11 @@ import type { ILibInputValidationHelper } from "../types"
  * @prop className: string | undefined
  * @prop validation: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
  */
-export const InputValidationHelper = ({
+export const InputValidationHelper: FC<ILibInputValidationHelper> = ({
     "data-testid": testid,
     className,
     validation,
-}: ILibInputValidationHelper) => {
+}) => {
     const {
         status,
         message,

package/dist/lib/components/InputComponents/components/InputValidationIcon.tsx

@@ -1,5 +1,4 @@
-/*=============================================== InputValidation component ===============================================*/
-
+import type { FC } from "react"
 import { CheckCircle, CloseCircle } from "../../../icons"
 import { LibIcon } from "../../LibIcon"
 import { StyledInputValidationIcon } from "../styles"
@@ -15,12 +14,12 @@ const DEFAULT_ICON_SIZE = 16
  * @prop inputBackground: "light" | "dark" | undefined
  * @prop validation: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
  */
-export const InputValidationIcon = ({
+export const InputValidationIcon: FC<ILibInputValidationIcon> = ({
     "data-testid": testid,
     className,
     validation,
     inputBackground,
-}: ILibInputValidationIcon) => {
+}) => {
     const commonIconProps = {
         className: className && "ValidationIcon",
         size: DEFAULT_ICON_SIZE,

package/dist/lib/components/InputComponents/components/InputWrapper.tsx

@@ -1,8 +1,7 @@
-/*=============================================== InputWrapper component ===============================================*/
-
 import classNames from "classnames"
 import { StyledInputWrapper } from "../styles"
 import type { ILibInputWrapper } from "../types"
+import type { FC } from "react"
 
 /**
  * @description Returns a wrapper for inputs holding icon left, input and right container
@@ -17,7 +16,7 @@ import type { ILibInputWrapper } from "../types"
  * @prop validationStatus: boolean | undefined
  * @prop children?: ReactChildren
  */
-export const InputWrapper = ({
+export const InputWrapper: FC<ILibInputWrapper> = ({
     "data-testid": testid,
     className,
     hasContainer,
@@ -27,7 +26,7 @@ export const InputWrapper = ({
     inputBackground,
     inputVariant,
     validationStatus,
-}: ILibInputWrapper) => {
+}) => {
     return (
         <StyledInputWrapper
             data-testid={hasContainer && testid ? `${testid}.Wrapper` : testid}

package/dist/lib/components/InputComponents/components/ListInput.tsx

@@ -1,6 +1,4 @@
-/*=============================================== ListInput component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { StyledListInput } from "../styles"
 import type { ILibListInput } from "../types"
@@ -17,35 +15,28 @@ import type { ILibListInput } from "../types"
  * @prop validationStatus: boolean | undefined
  * @prop children?: ReactChildren
  */
-export const ListInput = forwardRef<HTMLDivElement, ILibListInput>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            children,
-            direction = "down",
-            inputBackground,
-            validationStatus,
-            isOpen,
-            inputVariant,
-        },
-        ref
-    ) => {
-        return (
-            <StyledListInput
-                data-testid={testid && `${testid}.ListInput`}
-                className={classNames(
-                    { ListInput: className },
-                    { Open: isOpen }
-                )}
-                ref={ref}
-                $direction={direction}
-                $inputBackground={inputBackground}
-                $validationStatus={validationStatus}
-                $inputVariant={inputVariant}
-            >
-                {children}
-            </StyledListInput>
-        )
-    }
-)
+export const ListInput: FC<ILibListInput> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    children,
+    direction = "down",
+    inputBackground,
+    validationStatus,
+    isOpen,
+    inputVariant,
+}) => {
+    return (
+        <StyledListInput
+            data-testid={testid && `${testid}.ListInput`}
+            className={classNames({ ListInput: className }, { Open: isOpen })}
+            ref={ref}
+            $direction={direction}
+            $inputBackground={inputBackground}
+            $validationStatus={validationStatus}
+            $inputVariant={inputVariant}
+        >
+            {children}
+        </StyledListInput>
+    )
+}

package/dist/lib/components/InputComponents/components/ListInputItem.tsx

@@ -1,6 +1,4 @@
-/*=============================================== ListInputItem component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { StyledListInputItem } from "../styles"
 import type { ILibListInputItem } from "../types"
@@ -18,39 +16,33 @@ import type { ILibListInputItem } from "../types"
  * @prop inputBackground: "light" | "dark" | undefined
  * @prop children?: ReactChildren
  */
-export const ListInputItem = forwardRef<HTMLSpanElement, ILibListInputItem>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            validationStatus,
-            inputBackground,
-            children,
-            isActive,
-            onClick,
-            readOnly,
-            isHovered,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledListInputItem
-                data-testid={testid && `${testid}.ListItem`}
-                ref={ref}
-                className={classNames(
-                    { ListItem: className },
-                    { Active: isActive },
-                    { Hovered: isHovered }
-                )}
-                onClick={onClick}
-                $readOnly={readOnly}
-                $validationStatus={validationStatus}
-                $inputBackground={inputBackground}
-                {...rest}
-            >
-                {children}
-            </StyledListInputItem>
-        )
-    }
-)
+export const ListInputItem: FC<ILibListInputItem> = ({
+    "data-testid": testid,
+    className,
+    validationStatus,
+    inputBackground,
+    children,
+    isActive,
+    onClick,
+    readOnly,
+    isHovered,
+    ...rest
+}) => {
+    return (
+        <StyledListInputItem
+            data-testid={testid && `${testid}.ListItem`}
+            className={classNames(
+                { ListItem: className },
+                { Active: isActive },
+                { Hovered: isHovered }
+            )}
+            onClick={onClick}
+            $readOnly={readOnly}
+            $validationStatus={validationStatus}
+            $inputBackground={inputBackground}
+            {...rest}
+        >
+            {children}
+        </StyledListInputItem>
+    )
+}

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

@@ -1,5 +1,3 @@
-/*=============================================== InputComponents exports ===============================================*/
-
 export * from "./components/InputContainer"
 export * from "./components/InputIcon"
 export * from "./components/InputRightContainer"

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

@@ -1,5 +1,3 @@
-/*=============================================== InputComponents styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import {
     Mixins,
@@ -19,8 +17,6 @@ import type {
     LibInputListDirection,
 } from "../../types"
 
-/*====================== IconContainer ======================*/
-
 const StyledInputIconContainer = styled.span<{
     $validationStatus: LibValidationStatus | undefined
     $inputBackground: LibInputBackground | undefined
@@ -66,8 +62,6 @@ const StyledInputIconContainer = styled.span<{
     }}
 `
 
-/*====================== LeftContainer ======================*/
-
 const CommonLeftAndRight = ({
     $disabled,
     $withBorder,
@@ -107,8 +101,6 @@ const StyledInputLeftContainer = styled.span<{
     }
 `
 
-/*====================== RightContainer ======================*/
-
 const StyledInputRightContainer = styled.span<{
     $disabled: boolean | undefined
     $withPadding?: boolean
@@ -132,8 +124,6 @@ const StyledInputRightContainer = styled.span<{
         `}
 `
 
-/*====================== InputValidationIcon ======================*/
-
 const StyledInputValidationIcon = styled.span<{
     $inputBackground: LibInputBackground | undefined
     $validationStatus: LibValidationStatus
@@ -168,8 +158,6 @@ const StyledInputValidationIcon = styled.span<{
     }}
 `
 
-/*====================== InputButton ======================*/
-
 const StyledInputButton = styled.button<{
     $inputBackground: LibInputBackground | undefined
     $validationStatus: LibValidationStatus | undefined
@@ -306,8 +294,6 @@ const StyledInputButton = styled.button<{
     }}
 `
 
-/*====================== InputWrapper ======================*/
-
 const StyledInputWrapper = styled.div<{
     $inputBackground: LibInputBackground | undefined
     $inputVariant: LibInputVariant | undefined
@@ -403,8 +389,6 @@ const StyledInputWrapper = styled.div<{
     }}
 `
 
-/*====================== ListInput ======================*/
-
 const StyledListInput = styled.div<{
     $direction?: LibInputListDirection
     $inputBackground: LibInputBackground | undefined
@@ -489,8 +473,6 @@ const StyledListInput = styled.div<{
     }}
 `
 
-/*====================== ListInputItem ======================*/
-
 const StyledListInputItem = styled.span<{
     $validationStatus: LibValidationStatus
     $inputBackground: LibInputBackground | undefined
@@ -625,8 +607,6 @@ const StyledListInputItem = styled.span<{
     }}
 `
 
-/*====================== InputPrefix and InputSuffix ======================*/
-
 const InputPrefixAndSuffixCommon = ({
     $inputBackground,
 }: {
@@ -699,8 +679,6 @@ const StyledInputSuffix = styled.span<{
     }
 `
 
-/*====================== InputAndListContainer ======================*/
-
 const StyledInputAndListContainer = styled.div`
     position: relative;
 

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

@@ -1,6 +1,4 @@
-/*=============================================== InputComponents types ===============================================*/
-
-import type { CSSProperties, MouseEventHandler } from "react"
+import type { CSSProperties, MouseEventHandler, Ref } from "react"
 import type {
     ReactChildren,
     LibInputListDirection,
@@ -13,8 +11,6 @@ import type {
     LibHelperBottom,
 } from "../../types"
 
-/*====================== Validation ======================*/
-
 interface LibValidationHelper {
     status: LibValidationStatus
     message?: string
@@ -42,8 +38,6 @@ export interface ILibInputValidationIcon {
     validation: LibValidationHelper
 }
 
-/*====================== No focus ======================*/
-
 export interface ILibInputNoFocusKeys {
     type:
         | undefined
@@ -67,8 +61,6 @@ export interface ILibInputNoFocusKeys {
     showKeys?: never
 }
 
-/*====================== InputBase ======================*/
-
 /**
  * @description Base props for inputs
  * @prop data-testid?: string
@@ -92,6 +84,7 @@ export interface ILibInputBase
     inputVariant?: LibInputVariant
     containerStyle?: CSSProperties
     inputAndListContainerStyle?: CSSProperties
+    ref?: Ref<HTMLInputElement>
 }
 
 export interface ILibExtendedInputBase extends ILibInputBase {
@@ -99,8 +92,6 @@ export interface ILibExtendedInputBase extends ILibInputBase {
     maxLength?: number
 }
 
-/*====================== InputContainer ======================*/
-
 export interface ILibInputContainer {
     "data-testid": string | undefined
     className: string | undefined
@@ -119,8 +110,6 @@ export interface ILibInputContainer {
     style?: CSSProperties
 }
 
-/*====================== InputIconContainer ======================*/
-
 export interface ILibInputIconContainer {
     "data-testid": string | undefined
     className: string | undefined
@@ -133,8 +122,6 @@ export interface ILibInputIconContainer {
     inputVariant: LibInputVariant | undefined
 }
 
-/*====================== InputRightContainer ======================*/
-
 export interface ILibInputRightContainer {
     "data-testid": string | undefined
     className: string | undefined
@@ -144,8 +131,6 @@ export interface ILibInputRightContainer {
     children?: ReactChildren
 }
 
-/*====================== InputLeftContainer ======================*/
-
 export interface ILibInputLeftContainer {
     "data-testid": string | undefined
     className: string | undefined
@@ -153,8 +138,6 @@ export interface ILibInputLeftContainer {
     disabled: boolean | undefined
 }
 
-/*====================== InputButton ======================*/
-
 interface ILibInputButtonBase {
     "data-testid": string | undefined
     "aria-label": string | undefined
@@ -184,8 +167,6 @@ export type ILibInputButton = RequireAtLeastOne<
     "icon" | "text"
 >
 
-/*====================== InputWrapper ======================*/
-
 export interface ILibInputWrapper {
     "data-testid": string | undefined
     className: string | undefined
@@ -198,10 +179,9 @@ export interface ILibInputWrapper {
     validationStatus: LibValidationStatus
 }
 
-/*====================== List input ======================*/
-
 export interface ILibListInput {
     "data-testid": string | undefined
+    ref: Ref<HTMLDivElement> | undefined
     className: string | undefined
     direction: LibInputListDirection | undefined
     inputBackground: LibInputBackground | undefined
@@ -211,8 +191,6 @@ export interface ILibListInput {
     children?: ReactChildren
 }
 
-/*====================== List input item ======================*/
-
 interface ILibListInputItemBase {
     "data-testid": string | undefined
     className: string | undefined
@@ -237,8 +215,6 @@ interface ListInputItemReadOnly extends ILibListInputItemBase {
 
 export type ILibListInputItem = ListInputItemActive | ListInputItemReadOnly
 
-/*====================== Input with icon and prefix / suffix ======================*/
-
 export interface ILibInputIcon {
     suffix?: LibInputPrefixAndSuffix
     icon?: LibIcon
@@ -247,8 +223,6 @@ export interface ILibInputIcon {
     prefix?: string
 }
 
-/*====================== Inputs with prefix and suffix ======================*/
-
 interface ILibPrefixAndSuffixBase {
     "data-testid": string | undefined
     className: string | undefined
@@ -277,10 +251,9 @@ export interface ILibInputSuffix extends ILibPrefixAndSuffixBase {
     suffix?: LibInputPrefixAndSuffix
 }
 
-/*====================== InputAndListContainer ======================*/
-
 export interface ILibInputAndListContainer {
     "data-testid": string | undefined
+    ref?: Ref<HTMLDivElement>
     className: string | undefined
     hasListOpen: boolean
     isParent: boolean | undefined

package/dist/lib/components/InputContainer/HelperBottom.tsx

@@ -1,5 +1,3 @@
-/*=============================================== HelperBottom ===============================================*/
-
 import type { FC } from "react"
 import { LibIcon } from "../LibIcon"
 import { getIconSizeFromFont } from "../../lib-utils"