@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/skip-link.css.ts

@@ -1,34 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {vars} from './skins/skin-contract.css';
-import {sprinkles} from './sprinkles.css';
-import {screenReaderOnlyStyles} from './screen-reader-only.css';
-
-export const skipLinkContainer = style([
-    sprinkles({
-        background: vars.colors.backgroundContainer,
-        border: 'regular',
-        borderRadius: vars.borderRadii.container,
-        padding: 8,
-        position: 'absolute',
-        top: 0,
-        left: 0,
-    }),
-    {
-        width: 'fit-content',
-        boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.2)',
-        opacity: 1,
-        transition: 'opacity 0.15s ease-in-out',
-        selectors: {
-            '&:not(:focus-within)': {
-                ...screenReaderOnlyStyles,
-                opacity: 0,
-            },
-        },
-    },
-]);
-
-export const skipLinkList = style({
-    listStyle: 'none',
-    padding: 0,
-    margin: 0,
-});

package/src/skip-link.tsx

@@ -1,52 +0,0 @@
-'use client';
-import * as React from 'react';
-import {ButtonLink} from './button';
-import * as styles from './skip-link.css';
-import {useTheme} from './hooks';
-import * as tokens from './text-tokens';
-import {getPrefixedDataAttributes} from './utils/dom';
-
-import type {DataAttributes} from './utils/types';
-
-type Props = {
-    targetId: string;
-    'aria-label'?: string;
-    children?: React.ReactNode;
-    dataAttributes?: DataAttributes;
-};
-
-const SkipLink = ({targetId, children, 'aria-label': ariaLabel, dataAttributes}: Props): JSX.Element => {
-    return (
-        <div className={styles.skipLinkContainer} {...getPrefixedDataAttributes(dataAttributes, 'SkipLink')}>
-            <ButtonLink aria-label={ariaLabel} href={`#${targetId}`} withChevron={false}>
-                {children}
-            </ButtonLink>
-        </div>
-    );
-};
-
-type SkipLinkNavProps = {
-    children: React.ReactNode;
-    'aria-label'?: string;
-    dataAttributes?: DataAttributes;
-};
-
-export const SkipLinkNav = ({
-    children,
-    'aria-label': ariaLabel,
-    dataAttributes,
-}: SkipLinkNavProps): JSX.Element => {
-    const {texts, t} = useTheme();
-    const navLabel = ariaLabel || texts.skipLinkNavLabel || t(tokens.skipLinkNavLabel);
-    return (
-        <nav aria-label={navLabel} {...getPrefixedDataAttributes(dataAttributes, 'SkipLinkNav')}>
-            <ul className={styles.skipLinkList}>
-                {React.Children.map(children, (child) => (
-                    <li>{child}</li>
-                ))}
-            </ul>
-        </nav>
-    );
-};
-
-export default SkipLink;

package/src/slider.css.ts

@@ -1,181 +0,0 @@
-import {style, styleVariants} from '@vanilla-extract/css';
-import {vars} from './skins/skin-contract.css';
-import * as mq from './media-queries.css';
-import {applyAlpha} from './utils/color';
-import {sprinkles} from './sprinkles.css';
-
-const DEFAULT_THUMB_SIZE = 20;
-const IOS_THUMB_SIZE = 28;
-
-export const container = style([
-    sprinkles({
-        width: '100%',
-        position: 'relative',
-        display: 'flex',
-        alignItems: 'center',
-        cursor: 'pointer',
-    }),
-    {
-        touchAction: 'none',
-        userSelect: 'none',
-    },
-]);
-
-export const disabled = style({
-    opacity: 0.5,
-    pointerEvents: 'none',
-});
-
-export const track = sprinkles({
-    width: '100%',
-    height: 4,
-    borderRadius: vars.borderRadii.bar,
-});
-
-export const thumbContainer = style([
-    sprinkles({
-        position: 'absolute',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    }),
-    {
-        top: '50%',
-        transform: 'translateY(-50%)',
-        WebkitTapHighlightColor: 'transparent',
-    },
-]);
-
-const defaultThumbBase = style([
-    sprinkles({
-        width: DEFAULT_THUMB_SIZE,
-        height: DEFAULT_THUMB_SIZE,
-        borderRadius: '50%',
-    }),
-    {
-        transition: '0.3s cubic-bezier(0.215, 0.61, 0.355, 1)',
-    },
-]);
-
-export const defaultThumb = styleVariants({
-    default: [defaultThumbBase, sprinkles({background: vars.colors.controlActivated})],
-    alternative: [defaultThumbBase, sprinkles({background: vars.colors.controlActivated})],
-    brand: [defaultThumbBase, sprinkles({background: vars.colors.controlActivatedBrand})],
-    media: [defaultThumbBase, sprinkles({background: vars.colors.controlActivatedBrand})],
-    negative: [defaultThumbBase, sprinkles({background: vars.colors.controlActivatedNegative})],
-});
-
-export const iosThumb = style([
-    sprinkles({
-        background: vars.colors.iosControlKnob,
-        borderRadius: '50%',
-    }),
-    {
-        width: IOS_THUMB_SIZE,
-        height: IOS_THUMB_SIZE,
-        border: ' 0.5px solid rgba(0, 0, 0, 0.04)',
-        boxSizing: 'border-box',
-        boxShadow: '0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12)',
-    },
-]);
-
-export const thumbHover = styleVariants({
-    default: [
-        {
-            '@media': {
-                [mq.supportsHover]: {
-                    boxShadow: `0 0 0 5px ${applyAlpha(vars.rawColors.controlActivated, 0.2)}`,
-                },
-            },
-        },
-    ],
-    alternative: [
-        {
-            '@media': {
-                [mq.supportsHover]: {
-                    boxShadow: `0 0 0 5px ${applyAlpha(vars.rawColors.controlActivated, 0.2)}`,
-                },
-            },
-        },
-    ],
-    brand: [
-        {
-            '@media': {
-                [mq.supportsHover]: {
-                    boxShadow: `0 0 0 5px ${applyAlpha(vars.rawColors.controlActivatedBrand, 0.2)}`,
-                },
-            },
-        },
-    ],
-    media: [
-        {
-            '@media': {
-                [mq.supportsHover]: {
-                    boxShadow: `0 0 0 5px ${applyAlpha(vars.rawColors.controlActivatedBrand, 0.2)}`,
-                },
-            },
-        },
-    ],
-    negative: [
-        {
-            '@media': {
-                [mq.supportsHover]: {
-                    boxShadow: `0 0 0 5px ${applyAlpha(vars.rawColors.controlActivatedNegative, 0.2)}`,
-                },
-            },
-        },
-    ],
-});
-
-export const thumbActive = styleVariants({
-    default: [
-        {
-            boxShadow: `0 0 0 8px ${applyAlpha(vars.rawColors.controlActivated, 0.2)}`,
-        },
-    ],
-    alternative: [
-        {
-            boxShadow: `0 0 0 8px ${applyAlpha(vars.rawColors.controlActivated, 0.2)}`,
-        },
-    ],
-    brand: [
-        {
-            boxShadow: `0 0 0 8px ${applyAlpha(vars.rawColors.controlActivatedBrand, 0.2)}`,
-        },
-    ],
-    media: [
-        {
-            boxShadow: `0 0 0 8px ${applyAlpha(vars.rawColors.controlActivatedBrand, 0.2)}`,
-        },
-    ],
-    negative: [
-        {
-            boxShadow: `0 0 0 8px ${applyAlpha(vars.rawColors.controlActivatedNegative, 0.2)}`,
-        },
-    ],
-});
-
-export const input = style([
-    sprinkles({
-        position: 'absolute',
-        top: 0,
-    }),
-    {
-        zIndex: 1,
-        margin: 0,
-        appearance: 'none',
-        WebkitAppearance: 'none',
-        pointerEvents: 'none',
-        background: 'transparent',
-        '::-webkit-slider-thumb': {
-            appearance: 'none',
-            WebkitAppearance: 'none',
-            pointerEvents: 'none',
-        },
-        '::-moz-range-thumb': {
-            border: 'none',
-            background: 'transparent',
-            pointerEvents: 'none',
-        },
-    },
-]);

package/src/slider.tsx

@@ -1,384 +0,0 @@
-'use client';
-import * as React from 'react';
-import * as styles from './slider.css';
-import {vars} from './skins/skin-contract.css';
-import {isTouchableDevice} from './utils/environment';
-import classNames from 'classnames';
-import {cancelEvent} from './utils/dom';
-import {useTheme} from './hooks';
-import Tooltip from './tooltip';
-import Box from './box';
-import {useControlProps} from './form-context';
-import {combineRefs} from './utils/common';
-import {useThemeVariant} from './theme-variant-context';
-
-import type {ExclusifyUnion} from './utils/utility-types';
-import type {DataAttributes} from './utils/types';
-
-const MOBILE_TOUCHABLE_AREA = 48;
-const DEFAULT_THUMB_SIZE = 20;
-const IOS_THUMB_SIZE = 28;
-
-interface BaseSliderProps {
-    disabled?: boolean;
-    value?: number;
-    defaultValue?: number;
-    onChangeValue?: (value: number) => void;
-    tooltip?: boolean;
-    dataAttributes?: DataAttributes;
-    name: string;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    id?: string;
-}
-
-interface SliderWithValuesProps {
-    values: ReadonlyArray<number>;
-}
-
-interface SliderWithStepProps {
-    step?: number;
-    min?: number;
-    max?: number;
-}
-
-type SliderProps = BaseSliderProps & ExclusifyUnion<SliderWithStepProps | SliderWithValuesProps>;
-
-const getSliderValueAsPercentage = (value: number, min: number, max: number) => {
-    return min >= max ? 0 : (value - min) / (max - min);
-};
-
-const getValueInRange = (isPercentage: boolean, min: number, max: number, step: number, value?: number) => {
-    const getRealValue = (value?: number) => {
-        if (value === undefined) {
-            return min;
-        }
-        const realValue = isPercentage ? min + (max - min) * value : value;
-        return Math.max(min, Math.min(max, realValue));
-    };
-
-    if (min >= max) {
-        return min;
-    }
-
-    const currentValue = getRealValue(value);
-    const valueRoundedDown = min + Math.floor((currentValue - min) / step) * step;
-    const valueRoundedUp = min + Math.ceil((currentValue - min) / step) * step;
-
-    return valueRoundedUp <= max && valueRoundedUp - currentValue <= currentValue - valueRoundedDown
-        ? valueRoundedUp
-        : valueRoundedDown;
-};
-
-const getClosestValidValue = (min: number, value?: number, values?: ReadonlyArray<number>) => {
-    if (!values) {
-        return value;
-    }
-    if (value === undefined) {
-        return min;
-    }
-
-    let closestIndex = 0;
-    values.forEach((currentValue, index) => {
-        if (values && Math.abs(currentValue - value) <= Math.abs(values[closestIndex] - value)) {
-            closestIndex = index;
-        }
-    });
-    return closestIndex;
-};
-
-const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
-    (
-        {
-            values,
-            step = 1,
-            min = 0,
-            max = 100,
-            'aria-label': ariaLabel,
-            'aria-labelledby': ariaLabelledBy,
-            id,
-            dataAttributes,
-            tooltip,
-            ...props
-        },
-        ref
-    ) => {
-        if (values) {
-            if (values.length === 0) {
-                values = undefined;
-            } else {
-                max = values.length - 1;
-            }
-        }
-
-        step = step | 0;
-        step = step <= 0 ? 1 : step;
-
-        const {
-            defaultValue,
-            value,
-            onChange: onChangeValue,
-            focusableRef,
-            disabled,
-            name,
-        } = useControlProps({
-            name: props.name,
-            label: ariaLabel,
-            value:
-                props.value !== undefined
-                    ? getValueInRange(false, min, max, step, getClosestValidValue(min, props.value, values))
-                    : undefined,
-            defaultValue:
-                props.defaultValue !== undefined
-                    ? getValueInRange(
-                          false,
-                          min,
-                          max,
-                          step,
-                          getClosestValidValue(min, props.defaultValue, values)
-                      )
-                    : undefined,
-            onChange: props.onChangeValue,
-            disabled: props.disabled,
-        });
-
-        const [currentValue, setCurrentValue] = React.useState(
-            value ?? getValueInRange(false, min, max, step, getClosestValidValue(min, defaultValue, values))
-        );
-
-        const finalValue = value ?? currentValue;
-
-        const prevValueRef = React.useRef(finalValue);
-
-        const handleChange = React.useCallback(
-            (value: number, isPercentage: boolean) => {
-                const realValue = getValueInRange(isPercentage, min, max, step, value);
-                if (prevValueRef.current !== realValue) {
-                    onChangeValue(values ? values[realValue] : realValue);
-                    setCurrentValue(realValue);
-                    prevValueRef.current = realValue;
-                }
-            },
-            [min, max, step, values, onChangeValue]
-        );
-
-        /**
-         * HandleChange will trigger this useEffect whenever min/max/step props change.
-         * This allows the slider to be reactive to changes in these props.
-         */
-        React.useEffect(() => {
-            handleChange(prevValueRef.current, false);
-        }, [handleChange]);
-
-        const trackRef = React.useRef<HTMLDivElement>(null);
-        const thumbRef = React.useRef<HTMLDivElement>(null);
-        const sliderRef = React.useRef<HTMLDivElement>(null);
-        const inputRef = React.useRef<HTMLInputElement>(null);
-
-        const [isPointerDown, setIsPointerDown] = React.useState(false);
-        const [isThumbHovered, setIsThumbHovered] = React.useState(false);
-        const [isFocused, setIsFocused] = React.useState(false);
-        const {isIos} = useTheme();
-        const themeVariant = useThemeVariant();
-
-        const isPointerOverElement = (element: HTMLElement | null, x: number, y: number) => {
-            const box = element?.getBoundingClientRect();
-            return !!box && box.left <= x && x <= box.right && box.top <= y && y <= box.bottom;
-        };
-
-        const isTouchable = isTouchableDevice();
-
-        const thumbSize = isIos ? IOS_THUMB_SIZE : DEFAULT_THUMB_SIZE;
-        const touchableArea = isTouchable ? MOBILE_TOUCHABLE_AREA : thumbSize;
-
-        const updateCurrentValue = (pointerPosition: number) => {
-            const track = trackRef.current;
-            if (track) {
-                const leftBorder = track.getBoundingClientRect().left + thumbSize / 2;
-                const rightBorder = track.getBoundingClientRect().right - thumbSize / 2;
-                handleChange((pointerPosition - leftBorder) / (rightBorder - leftBorder), true);
-            }
-        };
-
-        const onPointerMove = (e: PointerEvent) => {
-            cancelEvent(e);
-            updateCurrentValue(e.clientX);
-        };
-
-        const capturePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
-            const thumb = thumbRef.current;
-            if (thumb) {
-                thumb.onpointermove = onPointerMove;
-                /**
-                 * There is a known firefox bug caused by using setPointerCapture().
-                 * If you press the slider, drag the pointer on top of a button and then release it,
-                 * the button will be clicked. The issue doesn't happen in Chrome or Safari, and it
-                 * can be reproduced by using basic HTML (https://codepen.io/Marcos-Kolodny/pen/oNmdMxM).
-                 *
-                 * This was reported to firefox a long time ago and many users mention different scenarios
-                 * where it happens, but it seems they are not working on it
-                 * (https://bugzilla.mozilla.org/show_bug.cgi?id=1648893).
-                 */
-                thumb.setPointerCapture(e.pointerId);
-            }
-        };
-
-        const releasePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
-            const thumb = thumbRef.current;
-            if (thumb) {
-                thumb.onpointermove = null;
-                thumb.releasePointerCapture(e.pointerId);
-            }
-        };
-
-        const progress = getSliderValueAsPercentage(finalValue, min, max);
-        const thumbPosition = `calc(${progress} * (100% - ${thumbSize}px) - ${(touchableArea - thumbSize) / 2}px)`;
-        const trackProgressPosition = `calc(${thumbPosition} + ${touchableArea / 2}px)`;
-
-        const thumb = (
-            <div
-                className={classNames(isIos ? styles.iosThumb : styles.defaultThumb[themeVariant], {
-                    [styles.thumbHover[themeVariant]]: !isIos && isThumbHovered && !isPointerDown,
-                    [styles.thumbActive[themeVariant]]: !isIos && isPointerDown,
-                })}
-            />
-        );
-
-        return (
-            <Box paddingY={8} dataAttributes={{'component-name': 'Slider', ...dataAttributes}}>
-                <div
-                    className={classNames(styles.container, {[styles.disabled]: disabled})}
-                    style={{height: touchableArea}}
-                    ref={sliderRef}
-                    onPointerDown={(e) => {
-                        const x = e.clientX;
-                        const y = e.clientY;
-                        if (!isTouchable && isPointerOverElement(sliderRef.current, x, y)) {
-                            if (!isPointerOverElement(thumbRef.current, x, y)) {
-                                updateCurrentValue(x);
-                            }
-                            setIsPointerDown(true);
-                            capturePointerMove(e);
-                        } else {
-                            cancelEvent(e);
-                        }
-                    }}
-                    onPointerUp={(e) => {
-                        if (!isTouchable) {
-                            setIsPointerDown(false);
-                            releasePointerMove(e);
-                        }
-                    }}
-                    onTouchStart={(e) => {
-                        cancelEvent(e);
-                        if (isTouchable) {
-                            const x = e.nativeEvent.touches[0].clientX;
-                            const y = e.nativeEvent.touches[0].clientY;
-                            if (!isPointerOverElement(thumbRef.current, x, y)) {
-                                updateCurrentValue(x);
-                            }
-                            setIsPointerDown(true);
-                        }
-                    }}
-                    onTouchEnd={(e) => {
-                        cancelEvent(e);
-                        if (isTouchable) {
-                            setIsPointerDown(false);
-                        }
-                    }}
-                    onTouchMove={(e) => {
-                        cancelEvent(e);
-                        if (isTouchable) {
-                            updateCurrentValue(e.nativeEvent.touches[0].clientX);
-                        }
-                    }}
-                >
-                    <div
-                        className={styles.track}
-                        ref={trackRef}
-                        style={{
-                            background: `linear-gradient(to right, ${
-                                {
-                                    default: vars.colors.controlActivated,
-                                    alternative: vars.colors.controlActivated,
-                                    brand: vars.colors.controlActivatedBrand,
-                                    media: vars.colors.controlActivatedBrand,
-                                    negative: vars.colors.controlActivatedNegative,
-                                }[themeVariant]
-                            } ${trackProgressPosition}, ${
-                                {
-                                    default: vars.colors.barTrack,
-                                    alternative: vars.colors.barTrack,
-                                    brand: vars.colors.barTrackBrand,
-                                    media: vars.colors.barTrackBrand,
-                                    negative: vars.colors.barTrackNegative,
-                                }[themeVariant]
-                            } ${trackProgressPosition}`,
-                        }}
-                    />
-                    <div
-                        className={styles.thumbContainer}
-                        ref={thumbRef}
-                        style={{
-                            cursor: isPointerDown ? 'grabbing' : isThumbHovered ? 'grab' : 'auto',
-                            left: thumbPosition,
-                            width: touchableArea,
-                            height: touchableArea,
-                        }}
-                        onPointerEnter={() => {
-                            if (!isTouchable) {
-                                setIsThumbHovered(true);
-                            }
-                        }}
-                        onPointerLeave={() => {
-                            if (!isTouchable) {
-                                setIsThumbHovered(false);
-                            }
-                        }}
-                    >
-                        {tooltip ? (
-                            <Tooltip
-                                target={thumb}
-                                open={isPointerDown || isFocused || isThumbHovered ? true : undefined}
-                                description={String(values ? values[finalValue] : finalValue)}
-                                centerContent
-                                delay={false}
-                            />
-                        ) : (
-                            thumb
-                        )}
-                    </div>
-                    <input
-                        type="range"
-                        min={min}
-                        max={max}
-                        ref={combineRefs(ref, inputRef, focusableRef)}
-                        step={step}
-                        aria-label={ariaLabel}
-                        aria-labelledby={ariaLabelledBy}
-                        id={id}
-                        className={styles.input}
-                        aria-valuetext={String(values ? values[finalValue] : finalValue)}
-                        style={{
-                            left: thumbPosition,
-                            width: touchableArea,
-                            height: touchableArea,
-                        }}
-                        name={name}
-                        value={finalValue}
-                        disabled={disabled}
-                        onChange={(e) => handleChange(+e.target.value, false)}
-                        onFocus={() => {
-                            setIsFocused(true);
-                        }}
-                        onBlur={() => {
-                            setIsFocused(false);
-                        }}
-                    />
-                </div>
-            </Box>
-        );
-    }
-);
-
-export default Slider;