@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/navigation-breadcrumbs.css.ts

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

@@ -1,69 +0,0 @@
-/**
- * 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

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

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

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

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

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

package/src/password-field.tsx

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