@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/text-field-base.tsx

@@ -1,628 +0,0 @@
-'use client';
-import classNames from 'classnames';
-import * as React from 'react';
-import {useIsomorphicLayoutEffect, useScreenSize, useTheme} from './hooks';
-import {InternalIconButton, InternalToggleIconButton} from './icon-button';
-import {iconSize} from './icon-button.css';
-import {vars} from './skins/skin-contract.css';
-import {Text3} from './text';
-import * as styles from './text-field-base.css';
-import {FieldContainer, HelperText, Label} from './text-field-components';
-import {fieldVars} from './text-field-base.css';
-import * as tokens from './text-tokens';
-import {ThemeVariant} from './theme-variant-context';
-import {combineRefs} from './utils/common';
-import {isFirefox, isRunningAcceptanceTest} from './utils/platform';
-
-import type {FieldValidator} from './form-context';
-import type {InputState} from './text-field-components';
-import type {DataAttributes, IconProps} from './utils/types';
-import type {ExclusifyUnion} from './utils/utility-types';
-
-const isValidInputValue = (value?: string, inputType?: React.HTMLInputTypeAttribute) => {
-    if (!inputType) {
-        return true;
-    }
-
-    const input = document.createElement('input');
-    input.type = inputType;
-    input.value = value || '';
-    return input.value !== '';
-};
-
-type FieldEndIconProps = {
-    /** In date fields, we want the icon's background to stay transparent when hovering/pressing it */
-    hasBackgroundColor?: boolean;
-    disabled?: boolean;
-} & ExclusifyUnion<
-    | {
-          Icon: (props: IconProps) => JSX.Element;
-          'aria-label'?: string;
-          onPress: (event: React.MouseEvent<HTMLElement>) => void;
-      }
-    | {
-          checkedProps: {Icon: (props: IconProps) => JSX.Element; 'aria-label'?: string};
-          uncheckedProps: {Icon: (props: IconProps) => JSX.Element; 'aria-label'?: string};
-          onChange?: (checked: boolean) => void | undefined | Promise<void>;
-          checked?: boolean;
-      }
->;
-
-export const FieldEndIcon = ({
-    hasBackgroundColor = true,
-    onPress,
-    onChange,
-    disabled,
-    Icon,
-    checkedProps,
-    uncheckedProps,
-    'aria-label': ariaLabel,
-}: FieldEndIconProps): JSX.Element => {
-    return checkedProps ? (
-        <InternalToggleIconButton
-            checkedProps={{...checkedProps, 'aria-label': checkedProps['aria-label'] || ''}}
-            uncheckedProps={{...uncheckedProps, 'aria-label': uncheckedProps['aria-label'] || ''}}
-            onChange={onChange}
-            hasOverlay={hasBackgroundColor}
-            disabled={disabled}
-            small
-            bleedRight
-        />
-    ) : (
-        <InternalIconButton
-            Icon={Icon}
-            disabled={disabled}
-            aria-label={ariaLabel || ''}
-            onPress={onPress}
-            hasOverlay={hasBackgroundColor}
-            small
-            bleedRight
-        />
-    );
-};
-
-/**
- * Incomplete list, add more if needed
- * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
- */
-export type AutoComplete =
-    | 'on'
-    | 'off'
-    | 'name' // full name
-    | 'given-name' // first name
-    | 'additional-name' // middle name
-    | 'family-name' // last name
-    | 'email'
-    | 'tel'
-    | 'street-address'
-    | 'address-line1' // for two address inputs
-    | 'address-line2' // for two address inputs
-    | 'address-level1' // state or province
-    | 'address-level2' // city
-    | 'country'
-    | 'postal-code'
-    | 'transaction-amount'
-    | 'new-password'
-    | 'current-password'
-    | 'cc-type' // The type of payment instrument (such as "Visa" or "Master Card")
-    | 'cc-name' // The full name as printed on or associated with a payment instrument such as a credit card
-    | 'cc-number' // A credit card number or other number identifying a payment method, such as an account number
-    | 'cc-exp' // A payment method expiration date, typically in the form "MM/YY" or "MM/YYYY"
-    | 'cc-csc' // The security code; on credit cards, this is the 3-digit verification number on the back of the card
-    | 'username'; // Username or account name, when used with a password field the browser offers to save credentials together
-
-export interface CommonFormFieldProps<T = HTMLInputElement> {
-    autoFocus?: boolean;
-    disabled?: boolean;
-    error?: boolean;
-    helperText?: string;
-    id?: string;
-    label: string;
-    name: string;
-    optional?: boolean;
-    showOptionalLabel?: boolean;
-    maxLength?: number;
-    validate?: FieldValidator;
-    validateOnBlurInsideForm?: boolean;
-    autoComplete?: AutoComplete;
-    onFocus?: React.FocusEventHandler<T>;
-    onBlur?: React.FocusEventHandler<T>;
-    fullWidth?: boolean;
-    getSuggestions?: (text: string) => ReadonlyArray<string>;
-    placeholder?: string;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    children?: void;
-    readOnly?: boolean;
-    preventCopy?: boolean;
-    dataAttributes?: DataAttributes;
-}
-
-interface TextFieldBaseProps {
-    id?: string;
-    type?: string;
-    autoComplete?: AutoComplete;
-    autoFocus?: boolean;
-    disabled?: boolean;
-    error?: boolean;
-    pattern?: string;
-    required?: boolean;
-    showOptionalLabel?: boolean;
-    fullWidth?: boolean;
-    helperText?: string;
-    label?: string;
-    placeholder?: string;
-    defaultValue?: string;
-    name?: string;
-    maxLength?: number;
-    prefix?: React.ReactNode;
-    startIcon?: React.ReactNode;
-    endIcon?: React.ReactNode;
-    endIconOverlay?: React.ReactNode;
-    style?: React.CSSProperties;
-    value?: string;
-    inputRef?: React.Ref<HTMLInputElement | HTMLSelectElement>;
-    getSuggestions?: (value: string) => ReadonlyArray<string>;
-    withSuggestionsEmptyCase?: boolean | string;
-    shouldShowSuggestions?: 'focus' | number;
-    onClick?: (event: React.MouseEvent) => void;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onBlur?: React.FocusEventHandler;
-    onFocus?: React.FocusEventHandler;
-    onKeyDown?: (event: React.KeyboardEvent) => void;
-    inputProps?: {[name: string]: string | number | undefined};
-    inputComponent?: React.ComponentType<any>;
-    shrinkLabel?: boolean;
-    focus?: boolean;
-    fieldRef?: React.RefObject<HTMLDivElement | null>;
-    onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
-    multiline?: boolean;
-    inputMode?: string;
-    readOnly?: boolean;
-    preventCopy?: boolean;
-    min?: string;
-    max?: string;
-    role?: string;
-    dataAttributes?: DataAttributes;
-}
-
-const preventCopyHandler = (e: React.ClipboardEvent<HTMLInputElement>) => {
-    e.preventDefault();
-};
-
-export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
-    (
-        {
-            error,
-            helperText,
-            label,
-            inputProps,
-            inputRef,
-            defaultValue,
-            value,
-            onFocus,
-            onBlur,
-            inputComponent,
-            prefix,
-            startIcon,
-            endIcon,
-            endIconOverlay,
-            shrinkLabel,
-            multiline = false,
-            focus,
-            fieldRef,
-            maxLength,
-            id: idProp,
-            autoComplete: autoCompleteProp,
-            fullWidth,
-            dataAttributes,
-            preventCopy,
-            showOptionalLabel = true,
-            required,
-            ...rest
-        },
-        ref
-    ) => {
-        const {preventCopyInFormFields, texts, t} = useTheme();
-        preventCopy = preventCopy ?? preventCopyInFormFields;
-        const reactId = React.useId();
-        const id = idProp || reactId;
-        const leftHelperTextid = React.useId();
-        const rightHelperTextid = React.useId();
-
-        const [inputState, setInputState] = React.useState<InputState>(
-            defaultValue?.length || value?.length ? 'filled' : 'default'
-        );
-        const {isTabletOrSmaller} = useScreenSize();
-        const [characterCount, setCharacterCount] = React.useState(defaultValue?.length ?? 0);
-        const hasLabel = !!label || !required;
-
-        const isDateInput =
-            rest.type === 'date' ||
-            rest.type === 'datetime-local' ||
-            rest.type === 'time' ||
-            rest.type === 'month';
-        const valueRef = React.useRef<string | undefined>(undefined);
-
-        useIsomorphicLayoutEffect(() => {
-            /**
-             * If the date format is invalid, value will be empty in the DOM element. We treat it like the
-             * case of an empty input. We have to do this because in some browsers, like Chrome, when the
-             * date value is empty it displays a placeholder (mm/dd/yyyy) that can't be removed, so we set
-             * it's opacity to 0 to avoid showing it.
-             */
-            const finalValue = isDateInput && !isValidInputValue(value, rest.type) ? '' : value;
-            const isControlled = value !== undefined;
-
-            // if value prop has changed, we need to set the input state to default if the new value is not valid
-            if (
-                valueRef.current !== value &&
-                isDateInput &&
-                !finalValue?.length &&
-                inputState === 'filled' &&
-                focus === undefined
-            ) {
-                setInputState('default');
-            }
-            valueRef.current = value;
-
-            if (inputState !== 'focused' && isControlled) {
-                setCharacterCount(finalValue?.length ?? 0);
-                setInputState(finalValue?.length ? 'filled' : 'default');
-            }
-            if (focus) {
-                setInputState('focused');
-            }
-            if (focus === false && !finalValue?.length) {
-                // when textfield is used in selects it doesn't get or lose focus
-                setInputState('default');
-            }
-            if (focus === false && finalValue?.length) {
-                setInputState('filled');
-            }
-        }, [inputState, value, focus, isDateInput, rest.type]);
-
-        React.useEffect(() => {
-            if (rest.autoFocus) {
-                setInputState('focused');
-            }
-        }, [rest.autoFocus]);
-
-        const defaultInputElement = multiline ? 'textarea' : 'input';
-
-        // FIXME it should be enough to forward refs. inputRef could be removed
-        const inputRefProps = inputComponent
-            ? {inputRef}
-            : {
-                  ref: combineRefs(ref, inputRef),
-              };
-
-        const props = {
-            ...rest,
-            maxLength,
-            autoComplete: autoCompleteProp,
-            ...inputProps,
-        };
-
-        const startIconWidth = `calc(${iconSize.small} + ${styles.fieldElementsGap}px)`;
-        const endIconWidth = `calc(${styles.iconButtonSize} + ${styles.fieldEndIconGap}px)`;
-
-        const isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
-        const scale = isShrinked
-            ? isTabletOrSmaller
-                ? fieldVars.labelScaleMobile
-                : fieldVars.labelScaleDesktop
-            : 1;
-        const labelStyle = {
-            left: `calc(${styles.fieldLeftPadding}px + ${startIcon ? startIconWidth : '0px'})`,
-            // shrinking means applying a scale transformation, so width will be proportionally reduced.
-            // Let's keep the original width.
-            width: `calc((100% - ${styles.fieldLeftPadding}px - ${startIcon ? startIconWidth : '0px'} - ${
-                endIcon || endIconOverlay ? endIconWidth : `${styles.fieldRightPadding}px`
-            }) / ${scale})`,
-        };
-
-        /* Workaround to avoid huge bullets on ios devices (-apple-system font related) */
-        const fontFamily =
-            rest.type === 'password' && characterCount > 0 ? 'Lucida Grande, Arial, sans-serif' : 'inherit';
-
-        return (
-            <FieldContainer
-                disabled={rest.disabled}
-                helperText={
-                    <HelperText
-                        error={error}
-                        leftText={helperText}
-                        leftTextId={leftHelperTextid}
-                        rightTextId={rightHelperTextid}
-                        rightText={multiline && maxLength ? `${characterCount}/${maxLength}` : undefined}
-                        rightTextLabel={
-                            multiline && maxLength
-                                ? t(
-                                      texts.formTextMultilineMaxCount || tokens.formTextMultilineMaxCount,
-                                      characterCount,
-                                      maxLength
-                                  )
-                                : undefined
-                        }
-                    />
-                }
-                multiline={multiline}
-                fullWidth={fullWidth}
-                fieldRef={fieldRef}
-                readOnly={rest.readOnly}
-                dataAttributes={dataAttributes}
-                focus={focus}
-            >
-                <ThemeVariant variant="default">
-                    {startIcon && (
-                        <div className={styles.startIcon} data-testid="startIcon">
-                            {startIcon}
-                        </div>
-                    )}
-
-                    {prefix && (
-                        <div
-                            aria-hidden
-                            className={classNames(
-                                styles.prefix,
-                                hasLabel ? styles.inputWithLabel : styles.inputWithoutLabel
-                            )}
-                            style={{
-                                opacity: inputState === 'default' ? 0 : 1,
-                            }}
-                        >
-                            <Text3 color={vars.colors.textSecondary} regular wordBreak={false}>
-                                {prefix}
-                            </Text3>
-                        </div>
-                    )}
-                    {label && (
-                        <Label
-                            style={labelStyle}
-                            error={error}
-                            forId={id}
-                            inputState={inputState}
-                            shrinkLabel={shrinkLabel}
-                            showOptional={!required && showOptionalLabel}
-                        >
-                            {label}
-                        </Label>
-                    )}
-                    <div className={styles.fullWidth}>
-                        <Text3 as="div" regular>
-                            {React.createElement(inputComponent || defaultInputElement, {
-                                ...inputRefProps,
-                                ...props,
-                                id,
-                                ...(required && {'aria-required': true}),
-                                ...(error && {'aria-invalid': true}),
-                                style: {
-                                    paddingRight: endIcon
-                                        ? 0
-                                        : endIconOverlay
-                                          ? endIconWidth
-                                          : styles.fieldRightPadding,
-                                    paddingLeft: prefix
-                                        ? 0
-                                        : startIcon
-                                          ? `calc(${startIconWidth} + ${styles.fieldLeftPadding}px)`
-                                          : styles.fieldLeftPadding,
-                                    ...props.style,
-                                    fontFamily,
-                                },
-                                className: multiline
-                                    ? classNames(
-                                          styles.textArea,
-                                          hasLabel ? styles.textAreaWithLabel : styles.textAreaWithoutLabel
-                                      )
-                                    : classNames(
-                                          styles.input,
-                                          hasLabel ? styles.inputWithLabel : styles.inputWithoutLabel,
-                                          {
-                                              [styles.inputFirefoxStyles]: isFirefox(),
-                                              // Hide webkit placeholder when label is not shrinked and value is empty
-                                              [styles.hiddenDatePlaceholder]:
-                                                  isDateInput && inputState === 'default',
-                                              // Force height of input when value is empty to avoid field from having height 0 in iOS
-                                              [styles.emptyDateValue]: isDateInput && inputState !== 'filled',
-                                          }
-                                      ),
-                                onFocus: (event: React.FocusEvent<HTMLInputElement>) => {
-                                    setInputState('focused');
-                                    onFocus?.(event);
-                                },
-                                onBlur: (event: React.FocusEvent<HTMLInputElement>) => {
-                                    if (event.target.value.length > 0) {
-                                        setInputState('filled');
-                                    } else {
-                                        setInputState('default');
-                                    }
-                                    onBlur?.(event);
-                                },
-                                onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
-                                    // Workaround for systems where maxlength prop is applied onBlur (https://caniuse.com/#feat=maxlength)
-                                    if (maxLength === undefined || event.target.value.length <= maxLength) {
-                                        setCharacterCount(event.target.value.length);
-
-                                        // Browser's autofill can change the value without focusing
-                                        if (event.target.value.length > 0 && inputState !== 'focused') {
-                                            setInputState(
-                                                event.target.value.length > 0 ? 'filled' : 'default'
-                                            );
-                                        }
-
-                                        props.onChange?.(event);
-                                    } else {
-                                        event.stopPropagation();
-                                        event.preventDefault();
-                                    }
-                                },
-                                defaultValue,
-                                value,
-                                ...(error && {'aria-invalid': true}),
-                                ...((helperText || (multiline && maxLength)) && {
-                                    'aria-describedby': `${leftHelperTextid} ${rightHelperTextid}`,
-                                }),
-                                ...(preventCopy && {
-                                    onCopy: preventCopyHandler,
-                                    onCut: preventCopyHandler,
-                                }),
-                            })}
-                        </Text3>
-                    </div>
-                    {endIcon && (
-                        <div className={styles.endIconContainer} data-testid="endIcon">
-                            {endIcon}
-                        </div>
-                    )}
-                    {endIconOverlay}
-                </ThemeVariant>
-            </FieldContainer>
-        );
-    }
-);
-
-const Autosuggest = React.lazy(() => import(/* webpackChunkName: "react-autosuggest" */ 'react-autosuggest'));
-
-export const TextFieldBaseAutosuggest = React.forwardRef<any, TextFieldBaseProps>(
-    (
-        {
-            getSuggestions,
-            id: idProp,
-            shouldShowSuggestions = 'focus',
-            withSuggestionsEmptyCase = false,
-            ...props
-        },
-        ref
-    ) => {
-        const [suggestions, setSuggestions] = React.useState<ReadonlyArray<string>>([]);
-        const [areSuggestionsShown, setAreSuggestionsShown] = React.useState(false);
-        const inputRef = React.useRef<HTMLInputElement>(null);
-        const containerRef = React.useRef<HTMLDivElement>(null);
-        const {platformOverrides, texts, t} = useTheme();
-        const reactId = React.useId();
-        const id = idProp || reactId;
-        const autoSuggestId = React.useId();
-
-        const suggestionEmptyCaseText =
-            typeof withSuggestionsEmptyCase === 'string'
-                ? withSuggestionsEmptyCase
-                : texts.searchFieldSuggestionsEmptyCase || t(tokens.searchFieldSuggestionsEmptyCase);
-
-        if (getSuggestions && (props.value === undefined || props.defaultValue !== undefined)) {
-            throw Error('Fields with suggestions must be used in controlled mode');
-        }
-        return getSuggestions ? (
-            <React.Suspense
-                fallback={
-                    <TextFieldBase
-                        {...props}
-                        // This label override while loading is needed in acceptance tests because
-                        // while the test is typing, the component could be remounted.
-                        // By hiding the label, we ensure that the test selects the loaded component
-                        label={isRunningAcceptanceTest(platformOverrides) ? '' : props.label}
-                        autoComplete="off"
-                        ref={ref}
-                        id={id}
-                    />
-                }
-            >
-                <Autosuggest
-                    id={autoSuggestId}
-                    inputProps={{
-                        ...props,
-                        id,
-                        autoComplete: 'off',
-                        // @ts-expect-error Autosuggest expects slightly different types
-                        onChange: (e: React.ChangeEvent<HTMLInputElement>, {newValue}) => {
-                            // hack to mutate event value
-                            e.target = {...e.target, value: newValue};
-                            e.currentTarget = {...e.currentTarget, value: newValue};
-                            props.onChange?.(e);
-                        },
-                    }}
-                    renderInputComponent={(inputProps) => {
-                        // The `Autosuggest.RenderInputComponentProps` type is missing the `key` property
-                        const {key, ...inputPropsWithoutKey} = inputProps as Record<string, any>;
-                        // extract key from inputProps to avoid React warning:
-                        // "A props object containing a "key" prop is being spread into JSX"
-                        return (
-                            <TextFieldBase
-                                key={key}
-                                role="combobox" // react-autosuggest adds this role to the container, but according to ARIA specs it should be on the input
-                                {...(inputPropsWithoutKey as TextFieldBaseProps)}
-                                fieldRef={containerRef}
-                                inputRef={combineRefs(inputRef, props.inputRef, ref)}
-                            />
-                        );
-                    }}
-                    suggestions={suggestions}
-                    shouldRenderSuggestions={(value) =>
-                        shouldShowSuggestions === 'focus' || value.trim().length >= shouldShowSuggestions
-                    }
-                    onSuggestionsFetchRequested={({value}) => {
-                        const matchedSuggestions = getSuggestions(value);
-                        setAreSuggestionsShown(true);
-                        setSuggestions(matchedSuggestions);
-                    }}
-                    onSuggestionsClearRequested={() => {
-                        setAreSuggestionsShown(false);
-                        setSuggestions([]);
-                    }}
-                    getSuggestionValue={(suggestion: any) => suggestion}
-                    renderSuggestion={(suggestion: any, {isHighlighted}) => (
-                        <div
-                            role="menuitem"
-                            className={classNames(styles.menuItem, {
-                                [styles.menuItemSelected]: isHighlighted,
-                            })}
-                        >
-                            <Text3 regular>{suggestion}</Text3>
-                        </div>
-                    )}
-                    renderSuggestionsContainer={(options) => {
-                        if (!areSuggestionsShown) {
-                            return null;
-                        }
-
-                        // extract key from containerProps to avoid React warning:
-                        // "A props object containing a "key" prop is being spread into JSX"
-                        const {key, ...containerPropsWithoutKey} = options.containerProps;
-                        const children =
-                            suggestions.length === 0 && withSuggestionsEmptyCase ? (
-                                <div role="status" className={classNames(styles.menuItemBase)}>
-                                    <Text3 regular color={vars.colors.textSecondary}>
-                                        {suggestionEmptyCaseText}
-                                    </Text3>
-                                </div>
-                            ) : (
-                                options.children
-                            );
-
-                        if (!children) {
-                            return null;
-                        }
-
-                        return (
-                            <div
-                                {...containerPropsWithoutKey}
-                                key={key}
-                                style={{
-                                    width: containerRef.current ? containerRef.current.clientWidth + 2 : 0, // +2 due to borders (input)
-                                }}
-                                className={styles.suggestionsContainer}
-                                aria-label={`${props.label} ${texts.menuLabelSuffix || t(tokens.menuLabelSuffix)}`}
-                            >
-                                {children}
-                            </div>
-                        );
-                    }}
-                />
-            </React.Suspense>
-        ) : (
-            <TextFieldBase {...props} id={id} ref={ref} />
-        );
-    }
-);