@telefonica/mistica 16.60.0 → 16.62.0-beta.1

package/src/pin-field.tsx

@@ -0,0 +1,346 @@
+'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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,85 @@
+'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

@@ -0,0 +1,43 @@
+'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

@@ -0,0 +1,61 @@
+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%',
+});