@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/autocomplete.tsx

@@ -1,239 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import TextField from './text-field';
-import * as styles from './autocomplete.css';
-import {Text3} from './text';
-import {combineRefs} from './utils/common';
-import {DOWN, ENTER, ESC, TAB, UP} from './utils/keys';
-import {cancelEvent} from './utils/dom';
-import classnames from 'classnames';
-import {vars} from './skins/skin-contract.css';
-import * as tokens from './text-tokens';
-import {useTheme} from './hooks';
-
-import type {CommonFormFieldProps} from './text-field-base';
-
-const mod = (n: number, m: number) => ((n % m) + m) % m;
-
-const getOptionId = (baseId: string, index: number) => `${baseId}-option-${index}`;
-
-export interface AutocompleteProps extends CommonFormFieldProps {
-    autoComplete?: never;
-    defaultValue?: never;
-    suggestionEmptyCase?: string;
-    getSuggestions: (value: string) => ReadonlyArray<string>;
-    value: string;
-    onChangeValue: (value: string, rawValue: string) => void;
-}
-
-const Autocomplete = React.forwardRef<any, AutocompleteProps>(
-    ({getSuggestions, onChangeValue, suggestionEmptyCase, ...rest}, refProp) => {
-        const [showOptions, setShowOptions] = React.useState(false);
-        const menuId = React.useId();
-        const statusId = React.useId();
-        const containerRef = React.useRef<HTMLDivElement | null>(null);
-        const inputRef = React.useRef<HTMLInputElement | null>(null);
-        const menuRef = React.useRef<HTMLUListElement | null>(null);
-        const [focusIndex, setFocusIndex] = React.useState<number>(-1);
-        const [top, setTop] = React.useState<number | undefined>(undefined);
-        const {texts, t} = useTheme();
-
-        const options = getSuggestions(rest.value);
-
-        React.useLayoutEffect(() => {
-            if (showOptions) {
-                const {height: menuHeight = 0} = menuRef.current?.getBoundingClientRect() || {};
-                const {
-                    top: comboboxTop = 0,
-                    bottom: comboboxBottom = 0,
-                    height: comboboxHeight = 0,
-                } = containerRef.current?.getBoundingClientRect() || {};
-
-                const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-                const menuSpacing = 8;
-
-                if (
-                    comboboxBottom + menuHeight + menuSpacing > viewportHeight &&
-                    comboboxTop - menuHeight - menuSpacing >= 0
-                ) {
-                    setTop(-menuHeight - menuSpacing);
-                    return;
-                }
-                setTop(comboboxHeight + menuSpacing);
-            }
-        }, [showOptions, rest.value]);
-
-        const showOptionsList = () => {
-            if (rest.readOnly) {
-                return;
-            }
-            setShowOptions(true);
-        };
-
-        const hideOptionsList = () => {
-            setShowOptions(false);
-            setFocusIndex(-1);
-        };
-
-        const updateTextFieldValue = React.useCallback(
-            (val: string, rawVal: string) => {
-                onChangeValue(val, rawVal);
-                setFocusIndex(-1);
-            },
-            [onChangeValue]
-        );
-
-        const validateFieldValue = React.useCallback(() => {
-            if (!options.includes(rest.value)) {
-                updateTextFieldValue('', '');
-            }
-        }, [options, rest.value, updateTextFieldValue]);
-
-        React.useEffect(() => {
-            if (focusIndex !== -1) {
-                containerRef.current
-                    ?.querySelectorAll('li')
-                    ?.[focusIndex]?.scrollIntoView({block: 'nearest'});
-            }
-        }, [focusIndex]);
-
-        React.useEffect(() => {
-            const handleClickOutside = (event: MouseEvent) => {
-                if (!containerRef.current?.contains(event.target as Node)) {
-                    hideOptionsList();
-                    validateFieldValue();
-                }
-            };
-
-            document.addEventListener('pointerup', handleClickOutside);
-            return () => {
-                document.removeEventListener('pointerup', handleClickOutside);
-            };
-        }, [options, rest.value, validateFieldValue]);
-
-        return (
-            <div
-                tabIndex={-1}
-                className={styles.autocompleteContainer}
-                ref={containerRef}
-                onKeyDown={(e) => {
-                    switch (e.key) {
-                        case DOWN:
-                        case UP: {
-                            const dir = e.key === DOWN ? 1 : -1;
-                            const initialFocusIndex = e.key === DOWN ? 0 : options.length - 1;
-                            cancelEvent(e);
-                            if (!showOptions) {
-                                showOptionsList();
-                            }
-                            if (!options.length) {
-                                return;
-                            }
-                            const nextIndex =
-                                focusIndex === -1 ? initialFocusIndex : mod(focusIndex + dir, options.length);
-                            setFocusIndex(nextIndex);
-                            break;
-                        }
-                        case ENTER: {
-                            const option = options[focusIndex];
-                            if (option) {
-                                cancelEvent(e);
-                                updateTextFieldValue(option, option);
-                                hideOptionsList();
-                            }
-                            break;
-                        }
-                        case ESC: {
-                            cancelEvent(e);
-                            if (!showOptions) {
-                                updateTextFieldValue('', '');
-                                return;
-                            }
-                            hideOptionsList();
-                            break;
-                        }
-                        case TAB: {
-                            hideOptionsList();
-                            // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/combobox_role#tab
-                            const option = options[focusIndex];
-                            if (!option) {
-                                validateFieldValue();
-                                return;
-                            }
-                            updateTextFieldValue(option, option);
-                            break;
-                        }
-                        default:
-                    }
-                }}
-            >
-                <TextField
-                    {...rest}
-                    ref={combineRefs(inputRef, refProp)}
-                    autoComplete="off"
-                    role="combobox"
-                    aria-controls={menuId}
-                    aria-expanded={showOptions}
-                    aria-autocomplete="list"
-                    aria-activedescendant={focusIndex > -1 ? getOptionId(menuId, focusIndex) : undefined}
-                    onChangeValue={(val, rawVal) => {
-                        showOptionsList();
-                        updateTextFieldValue(val, rawVal);
-                    }}
-                    onFocus={() => {
-                        showOptionsList();
-                    }}
-                />
-                <ul
-                    ref={menuRef}
-                    id={menuId}
-                    role="listbox"
-                    aria-label={rest.label}
-                    className={styles.optionsList}
-                    style={{display: showOptions && options.length !== 0 ? 'block' : 'none', top}}
-                >
-                    {options.map((option, index) => (
-                        <li
-                            id={getOptionId(menuId, index)}
-                            key={index}
-                            role="option"
-                            aria-selected={focusIndex === index}
-                            className={classnames(styles.optionItem, {
-                                [styles.optionItemSelected]: focusIndex === index,
-                            })}
-                            onMouseDown={(e) => {
-                                // Prevent blur and lost input focus
-                                e.preventDefault();
-                            }}
-                            onClick={() => {
-                                updateTextFieldValue(option, option);
-                                hideOptionsList();
-                            }}
-                        >
-                            <Text3 regular>{option}</Text3>
-                        </li>
-                    ))}
-                </ul>
-                <div role="status" aria-labelledby={statusId}>
-                    <div
-                        className={styles.optionsList}
-                        style={{display: showOptions && options.length === 0 ? 'block' : 'none', top}}
-                    >
-                        {options.length === 0 && showOptions && (
-                            <div className={styles.optionBaseItem}>
-                                <Text3 regular color={vars.colors.textSecondary} id={statusId}>
-                                    {suggestionEmptyCase ||
-                                        texts.autocompleteEmptyCase ||
-                                        t(tokens.autocompleteEmptyCase)}
-                                </Text3>
-                            </div>
-                        )}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-);
-
-export default Autocomplete;

package/src/avatar.css.ts

@@ -1,14 +0,0 @@
-import {sprinkles} from './sprinkles.css';
-import {vars} from './skins/skin-contract.css';
-
-export const avatar = sprinkles({
-    borderRadius: vars.borderRadii.avatar,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-});
-
-export const image = sprinkles({
-    objectFit: 'cover',
-});

package/src/avatar.tsx

@@ -1,120 +0,0 @@
-// https://www.figma.com/file/U4ipIXOk64bdM5tSvaqPKS/%5BREADY%5D--Avatar?node-id=2%3A61
-
-'use client';
-import * as React from 'react';
-import Badge from './badge';
-import IconUserAccountRegular from './generated/mistica-icons/icon-user-account-regular';
-import {useThemeVariant} from './theme-variant-context';
-import * as classes from './avatar.css';
-import {vars} from './skins/skin-contract.css';
-import {getPrefixedDataAttributes} from './utils/dom';
-import {pxToRem} from './utils/css';
-
-import type {DataAttributes, IconProps} from './utils/types';
-
-/**
- * Returns a right/top distance for the badge.
- * The badge will be placed over the avatar's edge
- * This is calculated using the `radius * (1 - sin(45deg))` distance minus a
- * constant offset that depends on the badge size
- */
-const getBadgeDistance = (size: number, badge?: boolean | number): number | string => {
-    if (!badge) {
-        return 0;
-    }
-    const radius = size / 2;
-    const badgeOffset = pxToRem(badge === true ? 5 : 10); // badge=true renders a small circle
-    return `calc(${radius * (1 - Math.sin(Math.PI / 4))}px - ${badgeOffset})`;
-};
-
-type AvatarProps = {
-    size: number;
-    src?: string;
-    initials?: string;
-    textColor?: string;
-    backgroundColor?: string;
-    Icon?: (props: IconProps) => JSX.Element;
-    badge?: boolean | number;
-    'aria-label'?: string;
-    dataAttributes?: DataAttributes;
-    border?: boolean;
-};
-
-/**
- * Not using TextPresets here because we don't want to scale the avatar text with the device settings
- */
-export const renderText = (size: number, text: string): JSX.Element | null => {
-    if (!text) {
-        return null;
-    }
-    let fontSize;
-    if (size <= 40) {
-        fontSize = 14;
-    } else if (size <= 64) {
-        fontSize = 16;
-    } else {
-        fontSize = 18;
-    }
-    return <span style={{fontSize, textTransform: 'uppercase'}}>{text}</span>;
-};
-const Avatar = ({
-    size,
-    src,
-    Icon = IconUserAccountRegular,
-    badge,
-    initials = '',
-    'aria-label': ariaLabel,
-    dataAttributes,
-    ...props
-}: AvatarProps): JSX.Element => {
-    const variant = useThemeVariant();
-    const isOverBrand = variant === 'brand' || variant === 'media' || variant === 'negative';
-    const backgroundColor =
-        props.backgroundColor ?? (isOverBrand ? vars.colors.brandHigh : vars.colors.brandLow);
-    const textColor =
-        props.textColor ?? (isOverBrand ? vars.colors.textPrimaryNegative : vars.colors.textBrand);
-    const [imgLoadError, setImgLoadError] = React.useState(false);
-    React.useEffect(() => {
-        setImgLoadError(false); // reset error state when url changes
-    }, [src]);
-    const border = props.border ? `1px solid ${vars.colors.borderLow}` : 'none';
-    const letters = initials.trim().slice(0, 2);
-    const badgePosition = getBadgeDistance(size, badge);
-    const badgeValue = badge === true ? undefined : badge || 0;
-    const shouldRenderImage = !!src && !imgLoadError;
-    const iconSize = size <= 40 ? 16 : 24;
-
-    return (
-        <Badge value={badgeValue} top={badgePosition} right={badgePosition}>
-            <div
-                className={classes.avatar}
-                role="img"
-                aria-label={ariaLabel ?? initials}
-                style={{
-                    width: size,
-                    height: size,
-                    color: textColor,
-                    background: backgroundColor,
-                    boxSizing: 'border-box',
-                    border,
-                }}
-                {...getPrefixedDataAttributes(dataAttributes, 'Avatar')}
-            >
-                {shouldRenderImage ? (
-                    <img
-                        src={src}
-                        className={classes.image}
-                        onError={() => setImgLoadError(true)}
-                        role="none"
-                        width={size}
-                        height={size}
-                    />
-                ) : (
-                    renderText(size, letters) || <Icon size={iconSize} color="currentColor" />
-                )}
-            </div>
-        </Badge>
-    );
-};
-
-export default Avatar;

package/src/badge.css.ts

@@ -1,51 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {sprinkles} from './sprinkles.css';
-import {vars} from './skins/skin-contract.css';
-import {pxToRem} from './utils/css';
-
-export const container = sprinkles({
-    position: 'relative',
-    display: 'inline-block',
-});
-
-export const badge = style([
-    sprinkles({
-        background: vars.colors.badge,
-    }),
-    {
-        width: pxToRem(8),
-        height: pxToRem(8),
-        top: pxToRem(-2),
-        right: pxToRem(-6),
-        borderRadius: '50%',
-    },
-]);
-
-export const badgeBorder = style({
-    boxShadow: `0px 0px 0px ${pxToRem(1.5)} ${vars.colors.borderLow}`,
-});
-
-export const badgeNumber = style([
-    badge,
-    sprinkles({
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    }),
-    {
-        top: pxToRem(-8),
-        right: pxToRem(-9),
-        width: pxToRem(18),
-        height: pxToRem(18),
-    },
-]);
-
-export const badgeWithChildren = sprinkles({
-    position: 'absolute',
-});
-
-export const badgeBigNumber = style({
-    width: pxToRem(24),
-    right: pxToRem(-14),
-    borderRadius: vars.borderRadii.indicator,
-});

package/src/badge.tsx

@@ -1,79 +0,0 @@
-'use client';
-import * as React from 'react';
-import classnames from 'classnames';
-import * as classes from './badge.css';
-import {getPrefixedDataAttributes} from './utils/dom';
-import {Text1} from './text';
-import {useTheme} from './hooks';
-import {vars} from './skins/skin-contract.css';
-import {useThemeVariant} from './theme-variant-context';
-
-import type {DataAttributes} from './utils/types';
-
-type Props = {
-    children?: React.ReactNode;
-    value?: number;
-    right?: number | string;
-    top?: number | string;
-    dataAttributes?: DataAttributes;
-};
-
-/**
- * This Component is decorative and won't be read by screenreaders, to make it accessible,
- * set the label to the child element
- *
- * <Badge value={2}>
- *   <IconButton aria-label="Shopping Cart with 2 items" Icon={IconShoppingCartFilled}/>
- * </Badge>
- */
-const Badge = ({children, value, right, top, dataAttributes}: Props): JSX.Element | null => {
-    const themeVariant = useThemeVariant();
-    const {textPresets} = useTheme();
-    if (children && value === 0) {
-        return <>{children}</>;
-    }
-
-    if (value === 0) {
-        return null;
-    }
-
-    const isBigNumber = value && value > 9;
-    const hasBorder =
-        themeVariant === 'brand' || themeVariant === 'negative' || themeVariant === 'media' || !!children;
-
-    return (
-        <div className={classes.container} {...getPrefixedDataAttributes(dataAttributes, 'Badge')}>
-            {children}
-            {value ? (
-                <div
-                    role="presentation"
-                    aria-hidden="true" // otherwise OSX VoiceOver reads this number
-                    className={classnames(classes.badgeNumber, {
-                        [classes.badgeWithChildren]: !!children,
-                        [classes.badgeBigNumber]: isBigNumber,
-                        [classes.badgeBorder]: hasBorder,
-                    })}
-                    style={{right, top}}
-                >
-                    <Text1
-                        forceMobileSizes
-                        weight={textPresets.indicator.weight}
-                        color={vars.colors.textPrimaryNegative}
-                    >
-                        {isBigNumber ? '+9' : value}
-                    </Text1>
-                </div>
-            ) : (
-                <div
-                    style={{right, top}}
-                    className={classnames(classes.badge, {
-                        [classes.badgeWithChildren]: !!children,
-                        [classes.badgeBorder]: hasBorder,
-                    })}
-                />
-            )}
-        </div>
-    );
-};
-
-export default Badge;

package/src/box.css.ts

@@ -1,51 +0,0 @@
-import {createVar, style} from '@vanilla-extract/css';
-import * as mq from './media-queries.css';
-
-const paddingTop = {
-    desktop: createVar(),
-    tablet: createVar(),
-    mobile: createVar(),
-};
-
-const paddingBottom = {
-    desktop: createVar(),
-    tablet: createVar(),
-    mobile: createVar(),
-};
-
-const paddingLeft = {
-    desktop: createVar(),
-    tablet: createVar(),
-    mobile: createVar(),
-};
-
-const paddingRight = {
-    desktop: createVar(),
-    tablet: createVar(),
-    mobile: createVar(),
-};
-
-export const vars = {paddingTop, paddingBottom, paddingLeft, paddingRight};
-
-export const box = style({
-    paddingTop: paddingTop.mobile,
-    paddingBottom: paddingBottom.mobile,
-    paddingLeft: paddingLeft.mobile,
-    paddingRight: paddingRight.mobile,
-
-    '@media': {
-        [mq.tablet]: {
-            paddingTop: paddingTop.tablet,
-            paddingBottom: paddingBottom.tablet,
-            paddingLeft: paddingLeft.tablet,
-            paddingRight: paddingRight.tablet,
-        },
-
-        [mq.desktopOrBigger]: {
-            paddingTop: paddingTop.desktop,
-            paddingBottom: paddingBottom.desktop,
-            paddingLeft: paddingLeft.desktop,
-            paddingRight: paddingRight.desktop,
-        },
-    },
-});

package/src/box.tsx

@@ -1,114 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import * as styles from './box.css';
-import {applyCssVars} from './utils/css';
-import {getPrefixedDataAttributes} from './utils/dom';
-
-import type {ByBreakpoint, DataAttributes} from './utils/types';
-
-export type PadSize = 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80;
-
-export type BoxProps = {
-    width?: number | string;
-    padding?: ByBreakpoint<PadSize>;
-    paddingX?: ByBreakpoint<PadSize>;
-    paddingY?: ByBreakpoint<PadSize>;
-    paddingTop?: ByBreakpoint<PadSize>;
-    paddingBottom?: ByBreakpoint<PadSize>;
-    paddingLeft?: ByBreakpoint<PadSize>;
-    paddingRight?: ByBreakpoint<PadSize>;
-    background?: string;
-    as?: React.ComponentType<any> | string;
-    children?: React.ReactNode;
-    /**
-     * @deprecated this component is meant to be used only to add padding.
-     * Consider using a div (or similar) instead if you need to add extra styles
-     */
-    className?: string;
-    role?: string;
-    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
-    dataAttributes?: DataAttributes;
-    'aria-label'?: string;
-    'aria-hidden'?: React.HTMLAttributes<HTMLAnchorElement>['aria-hidden'];
-    id?: string;
-};
-
-const Box = React.forwardRef<HTMLDivElement, BoxProps>(
-    (
-        {
-            className,
-            children,
-            as: Component = 'div',
-            width,
-            padding = 0,
-            paddingX = padding,
-            paddingY = padding,
-            paddingTop = paddingY,
-            paddingBottom = paddingY,
-            paddingLeft = paddingX,
-            paddingRight = paddingX,
-            background,
-            role,
-            id,
-            dataAttributes,
-            'aria-label': ariaLabel,
-            'aria-hidden': ariaHidden,
-        },
-        ref
-    ) => {
-        const paddingTopValues =
-            typeof paddingTop === 'object'
-                ? paddingTop
-                : {mobile: paddingTop, tablet: paddingTop, desktop: paddingTop};
-
-        const paddingBottomValues =
-            typeof paddingBottom === 'object'
-                ? paddingBottom
-                : {mobile: paddingBottom, tablet: paddingBottom, desktop: paddingBottom};
-
-        const paddingLeftValues =
-            typeof paddingLeft === 'object'
-                ? paddingLeft
-                : {mobile: paddingLeft, tablet: paddingLeft, desktop: paddingLeft};
-
-        const paddingRightValues =
-            typeof paddingRight === 'object'
-                ? paddingRight
-                : {mobile: paddingRight, tablet: paddingRight, desktop: paddingRight};
-
-        const applyPaddingVars = (
-            vars: (typeof styles.vars)[keyof typeof styles.vars],
-            values: {mobile: PadSize; tablet?: PadSize; desktop: PadSize}
-        ) => {
-            return applyCssVars({
-                [vars.mobile]: `${values.mobile}px`,
-                [vars.tablet]: `${values.tablet ?? values.mobile}px`,
-                [vars.desktop]: `${values.desktop}px`,
-            });
-        };
-
-        return (
-            <Component
-                {...getPrefixedDataAttributes(dataAttributes)}
-                role={role}
-                aria-label={ariaLabel}
-                aria-hidden={ariaHidden}
-                ref={ref}
-                className={classnames(className, styles.box)}
-                style={{
-                    ...applyPaddingVars(styles.vars.paddingTop, paddingTopValues),
-                    ...applyPaddingVars(styles.vars.paddingBottom, paddingBottomValues),
-                    ...applyPaddingVars(styles.vars.paddingLeft, paddingLeftValues),
-                    ...applyPaddingVars(styles.vars.paddingRight, paddingRightValues),
-                    ...(width !== undefined ? {width, boxSizing: 'border-box'} : {}),
-                    background,
-                }}
-                id={id}
-            >
-                {children}
-            </Component>
-        );
-    }
-);
-
-export default Box;