@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/pin-field.tsx

@@ -1,346 +0,0 @@
-'use client';
-import classNames from 'classnames';
-import * as React from 'react';
-import Inline from './inline';
-import * as textFieldStyles from './text-field-base.css';
-import * as styles from './pin-field.css';
-import {useTheme} from './hooks';
-import ScreenReaderOnly from './screen-reader-only';
-import {IntegerInput} from './integer-field';
-import {useFieldProps} from './form-context';
-import {createChangeEvent, getPrefixedDataAttributes} from './utils/dom';
-import {HelperText} from './text-field-components';
-import {flushSync} from 'react-dom';
-import * as tokens from './text-tokens';
-import {vars} from './skins/skin-contract.css';
-
-import type {DataAttributes} from './utils/types';
-
-// Protection for when there is more than one OtpField in the page.
-// This should't be a supported use case, but we need it in storybook/playroom, and for some reason
-// some Chrome versions crash when using navigator.credentials.get() more than once simultaneously.
-let isWaitingForSms = false;
-
-type PinInputProps = {
-    length?: number;
-    hideCode?: boolean;
-    readSms?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    inputRef: (field: HTMLInputElement | null) => void;
-};
-
-const PinInput = ({
-    length = 6,
-    hideCode = false,
-    readSms,
-    disabled,
-    readOnly,
-    value,
-    defaultValue,
-    onChange,
-    inputRef,
-}: PinInputProps): React.ReactElement => {
-    const {texts, t} = useTheme();
-    const [selfValue, setSelfValue] = React.useState<string>(defaultValue?.slice(0, length) ?? '');
-    const [focusIndex, setFocusIndex] = React.useState<number | undefined>(undefined);
-
-    const inputsList: Array<HTMLInputElement | null> = React.useRef(Array.from({length}, () => null)).current;
-
-    const isControlledByParent = typeof value !== 'undefined';
-    const controlledValue: string = isControlledByParent ? value : selfValue;
-
-    const changeValue = React.useCallback(
-        (newValue: string) => {
-            if (newValue === controlledValue) {
-                return;
-            }
-            if (!isControlledByParent) {
-                setSelfValue(newValue);
-            }
-            const firstInput = inputsList[0];
-            if (firstInput) {
-                onChange?.(createChangeEvent({...firstInput}, newValue));
-            }
-        },
-        [controlledValue, inputsList, isControlledByParent, onChange]
-    );
-
-    // sync controlled value if length changes
-    React.useEffect(() => {
-        changeValue(controlledValue.slice(0, length));
-    }, [length, controlledValue, changeValue]);
-
-    React.useEffect(() => {
-        // https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API
-        if (readSms && 'OTPCredential' in window && !isWaitingForSms) {
-            isWaitingForSms = true;
-            const abortController = new AbortController();
-            navigator.credentials
-                .get({
-                    // @ts-expect-error: otp is not in the types yet
-                    otp: {transport: ['sms']},
-                    signal: abortController.signal,
-                })
-                .then((otp) => {
-                    if (otp) {
-                        // @ts-expect-error: otp is not in the types yet
-                        const code = otp.code.slice(0, length);
-                        changeValue(code);
-                    }
-                })
-                .catch(() => {
-                    // ignore;
-                })
-                .finally(() => {
-                    isWaitingForSms = false;
-                });
-            return () => {
-                isWaitingForSms = false;
-                abortController.abort();
-            };
-        }
-    }, [changeValue, length, readSms]);
-
-    const createInputChangeHandler = (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
-        const eventValue = event.target.value;
-
-        // digit was deleted
-        if (eventValue === '') {
-            // case already handled in onKeyDown
-            return;
-        }
-
-        const currentValue = controlledValue[index];
-        let newInputValue: string = eventValue;
-        if (!currentValue || currentValue === eventValue) {
-            newInputValue = eventValue;
-        } else if (currentValue === eventValue[0]) {
-            newInputValue = eventValue.slice(1);
-        } else if (currentValue === eventValue[eventValue.length - 1]) {
-            newInputValue = eventValue.slice(0, -1);
-        }
-
-        let indexToFocus = index;
-        let newControlledValue = controlledValue;
-
-        // in the case of an autocomplete or copy and paste
-        if (newInputValue.length >= 2) {
-            const toPaste = newInputValue.slice(0, length - index);
-            const prevChars = controlledValue.slice(0, index);
-
-            newControlledValue = prevChars + toPaste;
-            indexToFocus = Math.min(index + toPaste.length, length - 1);
-        } else {
-            newControlledValue =
-                controlledValue.slice(0, index) + newInputValue + controlledValue.slice(index + 1);
-            indexToFocus = index + 1;
-        }
-
-        if (newControlledValue === controlledValue) {
-            return;
-        }
-        // need to flush sync to commit the new values to the dom before changing the focus
-        flushSync(() => {
-            changeValue(newControlledValue);
-        });
-        if (indexToFocus !== index && indexToFocus <= length - 1) {
-            inputsList[indexToFocus]?.focus();
-        }
-    };
-
-    return (
-        <Inline space={8} wrap verticalSpace={16}>
-            {Array.from({length}).map((_, index) => (
-                <div
-                    key={index}
-                    className={
-                        readOnly
-                            ? styles.readOnlyField
-                            : index === focusIndex
-                              ? styles.focusedField
-                              : styles.field
-                    }
-                >
-                    <IntegerInput
-                        aria-label={t(
-                            texts.pinFieldInputLabel || tokens.pinFieldInputLabel,
-                            index + 1,
-                            length
-                        )}
-                        type={hideCode ? 'password' : 'text'}
-                        tabIndex={index > controlledValue.length ? -1 : undefined}
-                        required
-                        onFocus={() => {
-                            const firstIndexWithoutValue =
-                                controlledValue.length === length ? -1 : controlledValue.length;
-                            if (firstIndexWithoutValue >= 0 && firstIndexWithoutValue < index) {
-                                inputsList[firstIndexWithoutValue]?.focus();
-                            } else {
-                                setFocusIndex(index);
-                            }
-                        }}
-                        onBlur={() => {
-                            setFocusIndex(undefined);
-                        }}
-                        inputRef={(el) => {
-                            inputsList[index] = el;
-
-                            if (index === 0) {
-                                inputRef(el);
-                            }
-                        }}
-                        className={classNames(textFieldStyles.input, styles.input, {
-                            [styles.passwordInput]: hideCode,
-                        })}
-                        /**
-                         * We need to override IntegerField styles because PinField has a different
-                         * style than other inputs (less margin, fontSize and height).
-                         */
-                        style={{
-                            lineHeight: styles.pinInputLineHeight,
-                            fontSize: styles.pinInputLineHeight,
-                            height: `calc(${styles.pinInputLineHeight} * 3 - 2px)`,
-                            borderRadius: vars.borderRadii.input,
-                        }}
-                        disabled={disabled}
-                        readOnly={readOnly}
-                        autoComplete={readSms ? 'one-time-code' : undefined}
-                        value={controlledValue[index] ?? ''}
-                        onChange={createInputChangeHandler(index)}
-                        onKeyDown={(event) => {
-                            switch (event.key) {
-                                case 'Backspace':
-                                case 'Delete':
-                                    if (event.currentTarget.value) {
-                                        // remove the char independently of caret position
-                                        changeValue(
-                                            controlledValue.slice(0, index) + controlledValue.slice(index + 1)
-                                        );
-                                    }
-                                    if (index > 0 && index >= controlledValue.length - 1) {
-                                        const prevInput = inputsList[index - 1];
-                                        prevInput?.focus();
-                                    }
-                                    break;
-                                case 'ArrowLeft':
-                                    if (index > 0) {
-                                        const prevInput = inputsList[index - 1];
-                                        if (prevInput) {
-                                            prevInput.focus();
-                                        }
-                                    }
-                                    break;
-                                case 'ArrowRight':
-                                    if (index < length - 1) {
-                                        const nextInput = inputsList[index + 1];
-                                        if (nextInput) {
-                                            nextInput.focus();
-                                        }
-                                    }
-                                    break;
-                                default:
-                                // ignore
-                            }
-                        }}
-                    />
-                    {hideCode && controlledValue[index] && (
-                        <div aria-hidden className={styles.passwordDot}>
-                            •
-                        </div>
-                    )}
-                </div>
-            ))}
-        </Inline>
-    );
-};
-
-type OtpFieldProps = {
-    length?: number;
-    /**
-     * Whether to hide the input code (password like input), false by default.
-     */
-    hideCode?: boolean;
-    /**
-     * Whether to read incoming SMS with OTP codes. It's true by default if hideCode is false, and false otherwise.
-     */
-    readSms?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    name: string;
-    value?: string;
-    defaultValue?: string;
-    helperText?: string;
-    error?: boolean;
-    onChangeValue?: (value: string, rawValue: string) => void;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    dataAttributes?: DataAttributes;
-};
-
-const PinField = ({
-    length = 6,
-    hideCode = false,
-    readSms = !hideCode, // by default, don't read sms if the code is hidden (password input type)
-    disabled,
-    readOnly,
-    name,
-    value,
-    defaultValue,
-    helperText,
-    error,
-    onChangeValue,
-    onChange,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    dataAttributes,
-}: OtpFieldProps): React.ReactElement => {
-    const fieldProps = useFieldProps({
-        name,
-        label: ariaLabel ?? '',
-        value,
-        defaultValue,
-        processValue: (s) => s,
-        helperText,
-        optional: false,
-        error,
-        disabled,
-        onChangeValue,
-        onChange,
-    });
-
-    const otpLabelId = React.useId();
-
-    return (
-        <div
-            role="group"
-            aria-labelledby={ariaLabelledBy ?? otpLabelId}
-            className={classNames(styles.fieldContainer, {[styles.disabled]: disabled})}
-            {...getPrefixedDataAttributes(dataAttributes, 'PinField')}
-        >
-            {ariaLabel && !ariaLabelledBy && (
-                <ScreenReaderOnly>
-                    <div id={otpLabelId}>{ariaLabel}</div>
-                </ScreenReaderOnly>
-            )}
-            <PinInput
-                inputRef={fieldProps.inputRef}
-                length={length}
-                hideCode={hideCode}
-                readSms={readSms}
-                value={fieldProps.value}
-                defaultValue={fieldProps.defaultValue}
-                disabled={fieldProps.disabled}
-                onChange={fieldProps.onChange}
-                readOnly={readOnly}
-            />
-            <HelperText error={fieldProps.error} leftText={fieldProps.helperText} />
-        </div>
-    );
-};
-
-export default PinField;

package/src/placeholder.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import {applyAlpha} from './utils/color';
-import {vars} from './skins/skin-contract.css';
-
-type PlaceholderProps = {
-    width?: string | number;
-    height?: string | number;
-    children?: void;
-};
-
-export const Placeholder = ({width = 'auto', height = 120}: PlaceholderProps): JSX.Element => {
-    return (
-        <div
-            style={{
-                height,
-                width,
-                boxSizing: 'border-box',
-                background: applyAlpha(vars.rawColors.neutralHigh, 0.08),
-                border: `2px solid ${applyAlpha(vars.rawColors.neutralHigh, 0.3)}`,
-                position: 'relative',
-            }}
-        >
-            <svg width="100%" height="100%">
-                <line
-                    style={{strokeWidth: 2, stroke: applyAlpha(vars.rawColors.neutralHigh, 0.1)}}
-                    x1={0}
-                    y1={0}
-                    x2="100%"
-                    y2="100%"
-                />
-                <line
-                    style={{strokeWidth: 2, stroke: applyAlpha(vars.rawColors.neutralHigh, 0.1)}}
-                    x1="100%"
-                    y1={0}
-                    x2={0}
-                    y2="100%"
-                />
-            </svg>
-        </div>
-    );
-};

package/src/popover.css.ts

@@ -1,8 +0,0 @@
-import {style} from '@vanilla-extract/css';
-
-const CONTENT_PADDING = 16;
-const BORDER_SIZE = 1;
-
-export const content = style({
-    padding: CONTENT_PADDING - BORDER_SIZE,
-});

package/src/popover.tsx

@@ -1,85 +0,0 @@
-'use client';
-import * as React from 'react';
-import {BaseTooltip} from './tooltip';
-import Inline from './inline';
-import Stack from './stack';
-import {Text2, Text3} from './text';
-import * as styles from './popover.css';
-import {vars as skinVars} from './skins/skin-contract.css';
-import {iconContainerSize} from './icon-button.css';
-
-import type {TrackingEvent, DataAttributes} from './utils/types';
-
-type Position = 'top' | 'bottom' | 'left' | 'right';
-
-type Props = {
-    description?: string;
-    target: React.ReactNode;
-    targetStyle?: React.CSSProperties;
-    title?: string;
-    asset?: React.ReactNode;
-    onClose?: () => void;
-    closeButtonLabel?: string;
-    position?: Position;
-    width?: number;
-    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-    open?: boolean;
-    children?: React.ReactNode;
-    extra?: React.ReactNode;
-    dataAttributes?: DataAttributes;
-};
-
-const Popover = ({
-    open,
-    extra,
-    children,
-    onClose = () => {},
-    closeButtonLabel,
-    dataAttributes,
-    trackingEvent,
-    title,
-    description,
-    asset,
-    ...props
-}: Props): JSX.Element => {
-    return (
-        <BaseTooltip
-            content={
-                <div className={styles.content}>
-                    {(title || description || asset) && (
-                        <div
-                            style={{
-                                paddingRight: `calc((${iconContainerSize.small} - 8px)`,
-                            }}
-                        >
-                            <Inline space={16}>
-                                {asset}
-                                <Stack space={4}>
-                                    {title && <Text3 regular>{title}</Text3>}
-                                    {description && (
-                                        <Text2 regular color={skinVars.colors.textSecondary}>
-                                            {description}
-                                        </Text2>
-                                    )}
-                                </Stack>
-                            </Inline>
-                        </div>
-                    )}
-
-                    {extra ?? children}
-                </div>
-            }
-            centerContent={false}
-            open={open}
-            hasPointerInteractionOnly
-            delay={false}
-            onClose={onClose}
-            closeButtonLabel={closeButtonLabel}
-            trackingEvent={trackingEvent}
-            dataAttributes={{'component-name': 'Popover', ...dataAttributes}}
-            {...props}
-        />
-    );
-};
-
-export default Popover;

package/src/portal.tsx

@@ -1,43 +0,0 @@
-'use client';
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-
-/**
- * This component renders the children elements outside the parent component.
- *
- * This is useful for components that need position fixed, for example
- * for menus, alerts, overlays, etc.
- *
- * See https://reactjs.org/docs/portals.html
- */
-
-type Props = {
-    children: React.ReactNode;
-    className?: string;
-};
-
-export const Portal = ({children, className}: Props): JSX.Element | null => {
-    const [container, setContainer] = React.useState<HTMLDivElement | null>(null);
-
-    React.useEffect(() => {
-        const newContainer = document.createElement('div');
-        newContainer.style.isolation = 'isolate';
-        setContainer(newContainer);
-        document.body.appendChild(newContainer);
-
-        return () => {
-            document.body.removeChild(newContainer);
-        };
-    }, []);
-
-    React.useEffect(() => {
-        const classes = className?.split(' ') || [];
-        container?.classList.add(...classes);
-
-        return () => {
-            container?.classList.remove(...classes);
-        };
-    }, [className, container]);
-
-    return container && ReactDOM.createPortal(children, container);
-};

package/src/progress-bar.css.ts

@@ -1,61 +0,0 @@
-import {sprinkles} from './sprinkles.css';
-import {vars} from './skins/skin-contract.css';
-import {style, keyframes, styleVariants} from '@vanilla-extract/css';
-
-const transition = '1s cubic-bezier(0.75, 0, 0.27, 1)';
-
-const barBackgroundBase = sprinkles({
-    borderRadius: vars.borderRadii.bar,
-    height: 4,
-});
-
-export const barBackground = styleVariants({
-    default: [barBackgroundBase, {background: vars.colors.barTrack}],
-    alternative: [barBackgroundBase, {background: vars.colors.barTrack}],
-    brand: [barBackgroundBase, {background: vars.colors.barTrackBrand}],
-    media: [barBackgroundBase, {background: vars.colors.barTrackBrand}],
-    negative: [barBackgroundBase, {background: vars.colors.barTrackNegative}],
-});
-
-export const bar = sprinkles({
-    height: '100%',
-    borderRadius: vars.borderRadii.bar,
-});
-
-const barKeyFrames = keyframes({
-    '0%': {
-        maxWidth: '0%',
-    },
-});
-
-const barKeyFramesInverte = keyframes({
-    '0%': {
-        maxWidth: '100%',
-    },
-});
-
-export const normal = style({
-    transition: `max-width ${transition}`,
-    animation: `${barKeyFrames} ${transition}`,
-    '@media': {
-        ['(prefers-reduced-motion)']: {
-            transition: 'none',
-            animation: 'none',
-        },
-    },
-});
-
-export const inverse = style({
-    transition: `max-width ${transition}`,
-    animation: `${barKeyFramesInverte} ${transition}`,
-    '@media': {
-        ['(prefers-reduced-motion)']: {
-            transition: 'none',
-            animation: 'none',
-        },
-    },
-});
-
-export const progressBarSteppedContainer = style({
-    width: '100%',
-});