@telefonica/mistica 16.60.0 → 16.62.0-beta.1

package/src/navigation-breadcrumbs.css.ts

@@ -0,0 +1,22 @@
+import {style} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+
+export const actions = style([
+    sprinkles({display: 'flex', flex: 1, alignItems: 'flex-end'}),
+    {marginTop: 16},
+]);
+
+export const link = style({
+    ':hover': {
+        textDecoration: 'underline',
+    },
+});
+
+export const current = style({
+    textDecoration: 'none',
+    pointerEvents: 'none',
+});
+
+export const list = style([sprinkles({padding: 0}), {margin: 0, listStyleType: 'none'}]);
+
+export const listItem = sprinkles({display: 'inline'});

package/src/navigation-breadcrumbs.tsx

@@ -0,0 +1,69 @@
+/**
+ * Figma: https://www.figma.com/file/BctaFHf0PVPX2uwRSl8taf/Breadcrumbs?node-id=2%3A61
+ * Accessibility: https://www.w3.org/WAI/ARIA/apg/example-index/breadcrumb/index.html
+ */
+
+'use client';
+import * as React from 'react';
+import {Text1} from './text';
+import {getPrefixedDataAttributes} from './utils/dom';
+import TextLink from './text-link';
+import * as styles from './navigation-breadcrumbs.css';
+import {vars} from './skins/skin-contract.css';
+
+import type {DataAttributes} from './utils/types';
+
+const BREADCRUMB_SEPARATOR = ' / ';
+
+export type NavigationBreadcrumbsProps = {
+    title: string;
+    breadcrumbs: ReadonlyArray<{
+        readonly title: string;
+        readonly url: string;
+        onNavigate?: () => void;
+    }>;
+    children?: void;
+    dataAttributes?: DataAttributes;
+    'aria-label'?: string;
+};
+
+const NavigationBreadcrumbs = ({
+    title,
+    breadcrumbs,
+    dataAttributes,
+    'aria-label': ariaLabel = 'Breadcrumb',
+}: NavigationBreadcrumbsProps): JSX.Element => {
+    return (
+        <nav aria-label={ariaLabel} {...getPrefixedDataAttributes(dataAttributes, 'NavigationBreadcrumbs')}>
+            <ol className={styles.list}>
+                {breadcrumbs.map(({title, url, onNavigate}, index) => (
+                    <li key={index} className={styles.listItem}>
+                        <TextLink to={url} className={styles.link} onNavigate={onNavigate}>
+                            <Text1 regular>{title}</Text1>
+                        </TextLink>
+                        <span role="presentation">
+                            <Text1 regular>{BREADCRUMB_SEPARATOR}</Text1>
+                        </span>
+                    </li>
+                ))}
+                <li className={styles.listItem}>
+                    {/* this anchor is added for accessibility, it is disabled */}
+                    <a
+                        aria-current="page"
+                        href="#"
+                        className={styles.current}
+                        onClick={(e) => {
+                            e.preventDefault();
+                        }}
+                    >
+                        <Text1 regular color={vars.colors.textSecondary}>
+                            {title}
+                        </Text1>
+                    </a>
+                </li>
+            </ol>
+        </nav>
+    );
+};
+
+export default NavigationBreadcrumbs;

package/src/negative-box.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+type Props = {
+    children: React.ReactNode;
+    right?: boolean;
+    left?: boolean;
+};
+
+const NegativeBox = ({left, right, children}: Props): JSX.Element => {
+    const marginLeft = left || (!left && !right) ? -16 : undefined;
+    const marginRight = right || (!left && !right) ? -16 : undefined;
+    return <div style={{marginLeft, marginRight}}>{children}</div>;
+};
+
+export default NegativeBox;

package/src/nestable-context.tsx

@@ -0,0 +1,139 @@
+'use client';
+import * as React from 'react';
+import {isEqual} from './utils/helpers';
+
+const useDeepCompareMemoize = (value: any) => {
+    const ref = React.useRef(undefined);
+
+    if (!isEqual(value, ref.current)) {
+        ref.current = value;
+    }
+
+    return ref.current;
+};
+
+/**
+ * This is like `useEffect` but with deep equal checks
+ */
+const useDeepCompareEffect: typeof React.useEffect = (create, inputs) =>
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useEffect(create, useDeepCompareMemoize(inputs));
+
+type Action<Value> = Readonly<
+    | {
+          type: 'add';
+          value: Value;
+      }
+    | {
+          type: 'remove';
+          value: Value;
+      }
+>;
+
+type Dispatch<Value> = (action: Action<Value>) => void;
+
+type ProviderProps = {children: React.ReactNode};
+
+const isObject = (object: any): object is Record<string, unknown> =>
+    object !== null && typeof object === 'object' && !Array.isArray(object);
+
+export type NestableContext<Value> = {
+    Getter: (props: {children: (value: Value) => React.ReactNode}) => JSX.Element;
+    Provider: (props: ProviderProps) => JSX.Element;
+    Setter: (props: {value: Value}) => null;
+    useValue: () => Value;
+    useSetValue: (value: Value) => void;
+};
+
+export const createNestableContext = <Value,>(
+    defaultValue: Value,
+    valuesReducer?: (values: Array<Value>) => Value
+): NestableContext<Value> => {
+    const DispatchContext = React.createContext<Dispatch<Value>>(() => {});
+    const ValueContext = React.createContext<Value>(defaultValue);
+
+    let providerInstances = 0;
+
+    /*
+    This component may have multiple children setting a value at the same time. When a child component mounts,
+    it fires an action {type: 'add', value}, when a child component unmounts (or changes the value) it fires
+    an action {type: 'remove', value}. See SetterComponent.
+
+    This parent component keeps track of all the set values, maintaining an array. The last value in the
+    array is used as current value (fallbacks to defaultValue when the array is empty).
+    The array is needed because we need to handle these edge cases:
+
+    - Page 1 sets value X, and following page 2 doesn't set any value. We need to use defaultValue in this
+    case.
+    - Page 1 sets value X, page 2 sets value Y. While transitioning between both values X and Y are set at
+    the same time, when Page 1 unmounts, value Y should be used.
+    */
+    const reducer = (values: Array<Value>, action: Action<Value>): Array<Value> => {
+        switch (action.type) {
+            case 'add':
+                return [...values, action.value];
+            case 'remove': {
+                const idx = values.indexOf(action.value);
+                return [...values.slice(0, idx), ...values.slice(idx + 1, values.length)];
+            }
+            default:
+                throw new Error(`Unhandled action type ${(action as any).type}`);
+        }
+    };
+
+    const Provider = ({children}: ProviderProps) => {
+        React.useEffect(() => {
+            providerInstances++;
+
+            if (providerInstances > 1 && process.env.NODE_ENV !== 'production') {
+                console.warn(`Multiple NestableContext instances: ${providerInstances}`);
+            }
+
+            return () => {
+                providerInstances--;
+            };
+        }, []);
+
+        const [values, dispatch] = React.useReducer(reducer, []);
+        let computedValue: Value = defaultValue;
+        if (values.length) {
+            if (isObject(values[0])) {
+                if (valuesReducer) {
+                    computedValue = valuesReducer(values);
+                } else {
+                    computedValue = Object.assign({}, defaultValue, ...values);
+                }
+            } else {
+                computedValue = values[values.length - 1];
+            }
+        }
+
+        return (
+            <DispatchContext.Provider value={dispatch}>
+                <ValueContext.Provider value={computedValue}>{children}</ValueContext.Provider>
+            </DispatchContext.Provider>
+        );
+    };
+
+    const useSetValue = (value: Value) => {
+        const dispatch = React.useContext(DispatchContext);
+
+        useDeepCompareEffect(() => {
+            dispatch({type: 'add', value});
+            return () => {
+                dispatch({type: 'remove', value});
+            };
+        }, [value, dispatch]);
+    };
+
+    const useValue = () => React.useContext(ValueContext);
+
+    const Setter = ({value}: {value: Value}) => {
+        useSetValue(value);
+        return null;
+    };
+
+    const Getter = ({children}: {children: (value: Value) => React.ReactNode}) => <>{children(useValue())}</>;
+
+    return {Setter, Provider, Getter, useSetValue, useValue};
+};

package/src/overlay.tsx

@@ -0,0 +1,86 @@
+'use client';
+import * as React from 'react';
+import {isAndroid, isChrome} from './utils/platform';
+import {useDisableBodyScroll, useTheme} from './hooks';
+import {getPrefixedDataAttributes} from './utils/dom';
+
+import type {DataAttributes} from './utils/types';
+
+const defaultStyle: React.CSSProperties = {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    outline: 'none',
+    WebkitTapHighlightColor: 'transparent',
+};
+
+type Props = {
+    children?: React.ReactNode;
+    onPress?: (evt: React.MouseEvent<HTMLDivElement>) => unknown;
+    style?: React.CSSProperties;
+    className?: string;
+    disableScroll?: boolean;
+    dataAttributes?: DataAttributes;
+};
+
+const Overlay = ({
+    onPress,
+    children,
+    className,
+    style,
+    disableScroll = false,
+    dataAttributes,
+}: Props): JSX.Element => {
+    useDisableBodyScroll(disableScroll);
+    const {platformOverrides} = useTheme();
+
+    // In mobile browsers event.button === 0. This event does not need to be handled in mobile. In desktop event.button === 2
+    const handleContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {
+        if (event.button === 2 && onPress) {
+            onPress(event);
+        }
+    };
+
+    return (
+        <div
+            data-overlay="true"
+            {...getPrefixedDataAttributes(dataAttributes, 'Overlay')}
+            style={{...defaultStyle, ...style}}
+            className={className}
+            onPointerDown={(e) => {
+                // We use listen to and cancel pointerdown to close overlay if user scrolls on iOS.
+                if ((e.target as any).dataset.overlay && onPress) {
+                    if (children && isAndroid(platformOverrides) && isChrome(platformOverrides)) {
+                        e.stopPropagation();
+                    } else {
+                        onPress(e);
+                    }
+                }
+            }}
+            onClick={(e) => {
+                e.stopPropagation();
+                // In Android we need to call onPress here in onClick to ensure click event doesn't hit element below overlay.
+                if (
+                    (e.target as any).dataset.overlay &&
+                    onPress &&
+                    children &&
+                    isAndroid(platformOverrides) &&
+                    isChrome(platformOverrides)
+                ) {
+                    onPress(e);
+                }
+            }}
+            // eslint-disable-next-line react/no-unknown-property
+            touch-action="auto" // Prop needed for Pointer Events Polyfill to work properly
+            onContextMenu={handleContextMenu}
+            role="button"
+            tabIndex={0}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default Overlay;

package/src/overscroll-color-context.tsx

@@ -0,0 +1,141 @@
+'use client';
+import * as React from 'react';
+import {useTheme} from './hooks';
+import {createNestableContext} from './nestable-context';
+import {getPlatform} from './utils/platform';
+import {getCssVarValue, isCssVar} from './utils/dom';
+
+import type {Theme} from './theme';
+
+type OverscrollColorConfig = {topColor?: string; bottomColor?: string};
+
+const {Provider, useSetValue, useValue} = createNestableContext<OverscrollColorConfig>({});
+
+export const useOverScrollColor = useValue;
+
+const shouldRender = (platformOverrides: Theme['platformOverrides']) =>
+    getPlatform(platformOverrides) === 'ios';
+
+const TopOverscrollColor = () => {
+    const {topColor} = useValue();
+    const {isDarkMode} = useTheme();
+    React.useEffect(() => {
+        if (!topColor) {
+            return;
+        }
+
+        const prevMetaTags = document.head.querySelectorAll('meta[name=theme-color]');
+        prevMetaTags.forEach((metaTag) => {
+            metaTag.remove();
+        });
+
+        const meta = document.createElement('meta');
+        meta.name = 'theme-color';
+        meta.media = isDarkMode ? '(prefers-color-scheme: dark)' : '(prefers-color-scheme: light)';
+        // css vars are not supported in theme-color meta tag
+        meta.content = isCssVar(topColor) ? getCssVarValue(topColor) : topColor;
+
+        document.head.appendChild(meta);
+
+        return () => {
+            // remove the overscroll color meta tag and restore previous meta tags
+            meta.remove();
+            prevMetaTags.forEach((metaTag) => {
+                document.head.appendChild(metaTag);
+            });
+        };
+    }, [isDarkMode, topColor]);
+    return null;
+};
+
+const useBodyBackgroundColor = () => {
+    const [bodyBackgroundColor, setBodyBackgroundColor] = React.useState<string>('transparent');
+
+    // When dark/light mode changes, body background color may change, so we need to listen to this event
+    React.useEffect(() => {
+        const mq = window.matchMedia('(prefers-color-scheme: dark)');
+
+        let rafId: number;
+        const listener = () => {
+            // We need to wait for the next frame (requestAnimationFrame) to get the updated body background color
+            rafId = requestAnimationFrame(() => {
+                const bodyBackgroundColor = getComputedStyle(document.body).backgroundColor;
+                setBodyBackgroundColor(bodyBackgroundColor);
+            });
+        };
+
+        mq.addListener(listener);
+        listener();
+
+        return () => {
+            mq.removeListener(listener);
+            cancelAnimationFrame(rafId);
+        };
+    }, []);
+
+    return bodyBackgroundColor;
+};
+
+const BottomOverscrollColor = () => {
+    const {topColor, bottomColor} = useValue();
+    const defaultBottomColor = useBodyBackgroundColor();
+
+    // if not specified a bottom color, dont render it, except if there is a top color defined,
+    // in that case we need to render the bottom color to avoid theme-color affecting the bottom overscroll
+    if (!bottomColor && !topColor) {
+        return null;
+    }
+
+    const bottomColorToApply = bottomColor ?? defaultBottomColor;
+
+    // if top and bottom color are the same, theme-color set for top color will work for bottom too, so this is not needed
+    if (bottomColorToApply === topColor) {
+        return null;
+    }
+
+    if (bottomColorToApply === 'transparent') {
+        return null;
+    }
+
+    // This sets a fixed div at the bottom of the screen with the bottom color. Fixed elements aren't affected by iOS scroll bounce,
+    // so this div is always visible as background.
+    // There is a known issue with this approach, if the bottom overscroll color is different from the body background color and there is a
+    // page section with a transparent background which is expected to have the background color of the body, the div with the bottom overscroll
+    // color will be visible behind the transparent section.
+    return (
+        <div
+            style={{
+                position: 'fixed',
+                zIndex: -1,
+                background: bottomColorToApply,
+                width: '100%',
+                height: 300,
+                left: 0,
+                right: 0,
+                bottom: 0,
+            }}
+        />
+    );
+};
+
+type ProviderProps = {children: React.ReactNode};
+
+export const OverscrollColorProvider = ({children}: ProviderProps): JSX.Element => {
+    const {platformOverrides} = useTheme();
+
+    if (!shouldRender(platformOverrides)) {
+        return <>{children}</>;
+    }
+
+    return (
+        <Provider>
+            <TopOverscrollColor />
+            {children}
+            <BottomOverscrollColor />
+        </Provider>
+    );
+};
+
+export const useSetOverscrollColor = (config: OverscrollColorConfig): void => {
+    useSetValue(config);
+};

package/src/package-version.tsx

@@ -0,0 +1,2 @@
+// DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
+export const PACKAGE_VERSION = '16.62.0-beta.1' as string;

package/src/password-field.tsx

@@ -0,0 +1,126 @@
+'use client';
+import * as React from 'react';
+import {useFieldProps} from './form-context';
+import {FieldEndIcon, TextFieldBaseAutosuggest} from './text-field-base';
+import {useTheme} from './hooks';
+import IconEyeOffRegular from './generated/mistica-icons/icon-eye-off-regular';
+import IconEyeRegular from './generated/mistica-icons/icon-eye-regular';
+import * as tokens from './text-tokens';
+
+import type {CommonFormFieldProps} from './text-field-base';
+
+export interface PasswordFieldProps extends CommonFormFieldProps {
+    onChangeValue?: (value: string, rawValue: string) => void;
+}
+
+const PasswordAdornment = ({
+    isVisible,
+    setVisibility,
+    focus,
+}: {
+    isVisible: boolean;
+    setVisibility: (isVisible: boolean) => void;
+    focus: () => void;
+}) => {
+    const {texts, t} = useTheme();
+    return (
+        <FieldEndIcon
+            checkedProps={{
+                Icon: IconEyeOffRegular,
+                'aria-label': texts.disablePasswordVisibility || t(tokens.disablePasswordVisibility),
+            }}
+            uncheckedProps={{
+                Icon: IconEyeRegular,
+                'aria-label': texts.enablePasswordVisibility || t(tokens.enablePasswordVisibility),
+            }}
+            checked={isVisible}
+            onChange={(visible) => {
+                setVisibility(visible);
+                focus();
+            }}
+        />
+    );
+};
+
+const PasswordField = ({
+    disabled,
+    error,
+    helperText,
+    name,
+    label,
+    optional,
+    validate,
+    validateOnBlurInsideForm,
+    onChange,
+    onChangeValue,
+    onBlur,
+    value,
+    autoComplete = 'current-password',
+    defaultValue,
+    dataAttributes,
+    ...rest
+}: PasswordFieldProps): JSX.Element => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const caretPositionRef = React.useRef<number>(0);
+    const inputRef = React.useRef<HTMLInputElement | null>(null);
+
+    const processValue = (value: string) => value;
+
+    const focus = () => {
+        const input = inputRef.current;
+        if (input) {
+            if (input.selectionStart !== null) {
+                caretPositionRef.current = input.selectionStart;
+            }
+            input.focus();
+        }
+    };
+
+    React.useEffect(() => {
+        const input = inputRef.current;
+        if (input) {
+            const rafId = requestAnimationFrame(() => {
+                input.selectionStart = caretPositionRef.current;
+                input.selectionEnd = caretPositionRef.current;
+            });
+
+            return () => {
+                cancelAnimationFrame(rafId);
+            };
+        }
+    }, [isVisible, caretPositionRef, inputRef]);
+
+    const fieldProps = useFieldProps({
+        name,
+        label,
+        value,
+        defaultValue,
+        processValue,
+        helperText,
+        optional,
+        error,
+        disabled,
+        onBlur,
+        validate,
+        validateOnBlurInsideForm,
+        onChange,
+        onChangeValue,
+    });
+
+    return (
+        <TextFieldBaseAutosuggest
+            {...rest}
+            {...fieldProps}
+            type={isVisible ? 'text' : 'password'}
+            inputRef={(field: HTMLInputElement | null) => {
+                fieldProps.inputRef(field);
+                inputRef.current = field;
+            }}
+            autoComplete={autoComplete}
+            endIcon={<PasswordAdornment focus={focus} isVisible={isVisible} setVisibility={setIsVisible} />}
+            dataAttributes={{'component-name': 'PasswordField', testid: 'PasswordField', ...dataAttributes}}
+        />
+    );
+};
+
+export default PasswordField;