@heymarco/next-auth/dist/components/FieldName.js

A complete authentication solution for web applications.

'use client';
// react:
import { 
// react:
default as React, } from 'react';
// reusable-ui core:
import { 
// react helper hooks:
useMergeRefs, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// reusable-ui components:
import { Icon, TextInput, ListItem, List, Tooltip, } from '@reusable-ui/components'; // a set of official Reusable-UI components
// internal components:
import { 
// react components:
InputWithLabel, } from './InputWithLabel.js';
// internals:
import { 
// states:
useSignInState, } from './states/signInState.js';
import { 
// utilities:
getValidityTheme, getValidityIcon, } from './utilities.js';
export const FieldName = (props) => {
    // rest props:
    const { 
    // states:
    isActiveSection, isActionApplied, 
    // components:
    nameInputComponent = React.createElement(InputWithLabel, { icon: 'account_box', inputComponent: React.createElement(TextInput, { autoCapitalize: 'words' }) }), nameTooltipComponent = React.createElement(Tooltip, { theme: 'warning', floatingPlacement: 'top' }), nameValidationListComponent = React.createElement(List, { listStyle: 'flat' }), nameValidationListItemComponent = React.createElement(ListItem, { size: 'sm', outlined: true }), nameValidationIconComponent = React.createElement(Icon, { size: 'sm', icon: undefined }), } = props;
    // states:
    const { 
    // constraints:
    nameMinLength, nameMaxLength, 
    // states:
    isBusy, 
    // fields & validations:
    userInteracted, nameRef, name, nameHandlers, nameFocused, nameValid, nameValidLength, } = useSignInState();
    const specificValidations = {
        nameValid,
        nameValidLength,
    };
    // validations:
    const nameValidationMap = {
        Length: React.createElement(React.Fragment, null,
            "Must be ",
            nameMinLength,
            "-",
            nameMaxLength,
            " characters."),
    };
    // refs:
    const mergedNameInputRef = useMergeRefs(
    // preserves the original `elmRef` from `nameInputComponent`:
    nameInputComponent.props.elmRef, (isActiveSection ? nameRef : undefined));
    // jsx:
    return (React.createElement(React.Fragment, null,
        React.cloneElement(nameInputComponent, 
        // props:
        {
            // refs:
            elmRef: mergedNameInputRef,
            // classes:
            className: nameInputComponent.props.className ?? 'name',
            // accessibilities:
            placeholder: nameInputComponent.props.placeholder ?? 'Your Name',
            // values:
            value: nameInputComponent.props.value ?? name,
            // validations:
            isValid: nameInputComponent.props.isValid ?? (nameValid === true),
            required: nameInputComponent.props.required ?? true,
            // formats:
            autoComplete: nameInputComponent.props.autoComplete ?? 'nickname',
            // handlers:
            ...nameHandlers,
        }),
        !!nameTooltipComponent && React.cloneElement(nameTooltipComponent, 
        // props:
        {
            // states:
            expanded: nameTooltipComponent.props.expanded ?? (nameFocused && userInteracted && !isBusy && isActiveSection && !isActionApplied),
            // floatable:
            floatingOn: nameTooltipComponent.props.floatingOn ?? nameRef,
        }, 
        // children:
        /* <List> */
        React.cloneElement(nameValidationListComponent, 
        // props:
        undefined, 
        // children:
        (nameValidationListComponent.props.children ?? Object.entries(nameValidationMap).map(([validationType, text], index) => {
            // conditions:
            if (!text)
                return null; // disabled => ignore
            // fn props:
            const isValid = specificValidations?.[`nameValid${validationType}`];
            if (isValid === undefined)
                return null;
            // jsx:
            return React.cloneElement(nameValidationListItemComponent, 
            // props:
            {
                // identifiers:
                key: nameValidationListItemComponent.key ?? index,
                // variants:
                theme: nameValidationListItemComponent.props.theme ?? getValidityTheme(isValid),
            }, 
            // children:
            nameValidationListItemComponent.props.children ?? React.createElement(React.Fragment, null,
                React.cloneElement(nameValidationIconComponent, 
                // props:
                {
                    // appearances:
                    icon: nameValidationIconComponent.props.icon ?? getValidityIcon(isValid),
                }),
                "\u00A0",
                text));
        }))))));
};