@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/responsive-layout.tsx

@@ -1,106 +0,0 @@
-'use client';
-import * as React from 'react';
-import classnames from 'classnames';
-import {getPrefixedDataAttributes} from './utils/dom';
-import * as styles from './responsive-layout.css';
-import {ThemeVariant, normalizeVariant, useThemeVariant} from './theme-variant-context';
-
-import type {Variant} from './theme-variant-context';
-import type {DataAttributes} from './utils/types';
-
-type Props = {
-    children: React.ReactNode;
-    fullWidth?: boolean;
-    className?: string;
-    /** @deprecated Use variant = 'brand' instead */
-    isInverse?: boolean;
-    variant?: Variant;
-    backgroundColor?: string;
-    dataAttributes?: DataAttributes;
-};
-
-export const InternalResponsiveLayout = ({
-    children,
-    isInverse = false,
-    variant,
-    backgroundColor,
-    className,
-    fullWidth,
-    dataAttributes,
-    shouldExpandWhenNested = false,
-    innerDivClassName,
-}: Props & {shouldExpandWhenNested?: boolean | 'desktop'; innerDivClassName?: string}): JSX.Element => {
-    // @deprecated @TODO https://jira.tid.es/browse/WEB-1611
-    const outsideVariant: Variant = useThemeVariant();
-    const internalVariant: Variant | undefined = variant || (isInverse && 'brand') || undefined;
-
-    return (
-        <ThemeVariant variant={internalVariant ?? outsideVariant}>
-            <div
-                className={classnames(
-                    className,
-                    internalVariant &&
-                        internalVariant !== 'default' &&
-                        styles.backgroundVariant[normalizeVariant(internalVariant)],
-                    ...(fullWidth
-                        ? []
-                        : [
-                              shouldExpandWhenNested
-                                  ? styles.desktopContainer
-                                  : styles.forcedMarginDesktopContainer,
-                              shouldExpandWhenNested === true
-                                  ? styles.mobileContainer
-                                  : styles.forcedMarginMobileContainer,
-                              styles.responsiveLayoutContainer,
-                          ])
-                )}
-                style={backgroundColor ? {background: backgroundColor} : undefined}
-                {...getPrefixedDataAttributes(dataAttributes)}
-            >
-                <div
-                    className={classnames(
-                        fullWidth ? styles.fullWidth : styles.responsiveLayout,
-                        innerDivClassName
-                    )}
-                >
-                    {children}
-                </div>
-            </div>
-        </ThemeVariant>
-    );
-};
-
-const ResponsiveLayout = ({children, ...props}: Props): JSX.Element => (
-    <InternalResponsiveLayout {...props} shouldExpandWhenNested>
-        {children}
-    </InternalResponsiveLayout>
-);
-
-export const ResetResponsiveLayout = ({
-    children,
-    skipMobile = false,
-    skipDesktop = false,
-}: {
-    children: React.ReactNode;
-    skipMobile?: boolean;
-    skipDesktop?: boolean;
-}): JSX.Element => {
-    return (
-        <div
-            className={classnames({
-                [styles.resetContainerMobile]: !skipMobile,
-                [styles.resetContainerDesktop]: !skipDesktop,
-            })}
-        >
-            <div
-                className={classnames({
-                    [styles.resetMobile]: !skipMobile,
-                    [styles.resetDesktop]: !skipDesktop,
-                })}
-            >
-                {children}
-            </div>
-        </div>
-    );
-};
-export default ResponsiveLayout;

package/src/screen-reader-only.css.ts

@@ -1,27 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {sprinkles} from './sprinkles.css';
-
-const sprinklesStyles = {
-    position: 'absolute',
-    padding: 0,
-    overflow: 'hidden',
-    border: 'none',
-} as const;
-
-const styles = {
-    margin: -1,
-    width: 1,
-    height: 1,
-    clip: 'rect(0, 0, 0, 0)',
-    clipPath: 'inset(50%)',
-    whiteSpace: 'nowrap',
-    userSelect: 'none',
-    fontSize: '1px',
-} as const;
-
-export const screenReaderOnlyStyles = {
-    ...sprinklesStyles,
-    ...styles,
-};
-
-export const screenReaderOnly = style([sprinkles(sprinklesStyles), styles]);

package/src/screen-reader-only.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import * as styles from './screen-reader-only.css';
-import {getPrefixedDataAttributes} from './utils/dom';
-import classnames from 'classnames';
-
-import type {DataAttributes} from './utils/types';
-
-type Props = {
-    children: React.ReactNode;
-    className?: string;
-    dataAttributes?: DataAttributes;
-};
-
-const ScreenReaderOnly = ({children, className, dataAttributes}: Props): JSX.Element => {
-    const prefixedDataAttributes = getPrefixedDataAttributes(dataAttributes, 'ScreenReaderOnly');
-
-    if (React.Children.count(children) === 1) {
-        const element = React.Children.only(children);
-        if (React.isValidElement(element)) {
-            return React.cloneElement(element as React.ReactElement<any>, {
-                className: classnames((element.props as any).className, styles.screenReaderOnly, className),
-                ...prefixedDataAttributes,
-            });
-        }
-    }
-    return (
-        <div className={classnames(styles.screenReaderOnly, className)} {...prefixedDataAttributes}>
-            {children}
-        </div>
-    );
-};
-
-export default ScreenReaderOnly;

package/src/screen-size-context-provider.tsx

@@ -1,96 +0,0 @@
-'use client';
-import * as React from 'react';
-import ScreenSizeContext from './screen-size-context';
-import {useIsomorphicLayoutEffect} from './hooks';
-import * as mq from './media-queries.css';
-
-type Props = {
-    children: React.ReactNode;
-};
-
-const ScreenSizeContextProvider = ({children}: Props): JSX.Element => {
-    /**
-     * To avoid problems with react hydrate, the server rendered content and the first client render should
-     * be equal. To achieve that, we always do a first render in client with isServerSide state at true, and
-     * then calc media queries and re-render in a second pass. Note that useIsomorphicLayoutEffect only runs
-     * in client side.
-     */
-    const [isServerSide, setIsServerSide] = React.useState(true);
-    useIsomorphicLayoutEffect(() => {
-        setIsServerSide(false);
-    }, []);
-
-    const [isMobile, setIsMobile] = React.useState(
-        () => !isServerSide && window.matchMedia(mq.mobile).matches
-    );
-    const [isTablet, setIsTablet] = React.useState(
-        () => !isServerSide && window.matchMedia(mq.tablet).matches
-    );
-    const [isTabletOrBigger, setIsTabletOrBigger] = React.useState(
-        () => !isServerSide && window.matchMedia(mq.tabletOrBigger).matches
-    );
-    const [isTabletOrSmaller, setIsTabletOrSmaller] = React.useState(
-        () => !isServerSide && window.matchMedia(mq.tabletOrSmaller).matches
-    );
-
-    const [isLargeDesktop, setIsLargeDesktop] = React.useState(
-        () => !isServerSide && window.matchMedia(mq.largeDesktop).matches
-    );
-    const [isExtraLargeDesktop, setIsExtraLargeDesktop] = React.useState(
-        () => !isServerSide && window.matchMedia(mq.extraLargeDesktop).matches
-    );
-
-    useIsomorphicLayoutEffect(() => {
-        if (!window.matchMedia) {
-            return;
-        }
-
-        const entries: Array<[string, (flag: boolean) => void]> = [
-            [mq.mobile, setIsMobile],
-            [mq.tablet, setIsTablet],
-            [mq.tabletOrBigger, setIsTabletOrBigger],
-            [mq.tabletOrSmaller, setIsTabletOrSmaller],
-            [mq.largeDesktop, setIsLargeDesktop],
-            [mq.extraLargeDesktop, setIsExtraLargeDesktop],
-        ];
-
-        const cleanupFunctions = entries.map(([query, setState]) => {
-            const mq = window.matchMedia(query);
-            const listener = () => {
-                setState(mq.matches);
-            };
-            mq.addEventListener('change', listener);
-            listener();
-            return () => {
-                mq.removeEventListener('change', listener);
-            };
-        });
-
-        return () => cleanupFunctions.forEach((fn) => fn());
-    }, []);
-
-    const value = React.useMemo(
-        () => ({
-            isMobile,
-            isTablet,
-            isTabletOrBigger,
-            isTabletOrSmaller,
-            isDesktopOrBigger: isServerSide ? false : !isTabletOrSmaller,
-            isLargeDesktop,
-            isExtraLargeDesktop,
-        }),
-        [
-            isMobile,
-            isTablet,
-            isTabletOrBigger,
-            isTabletOrSmaller,
-            isLargeDesktop,
-            isExtraLargeDesktop,
-            isServerSide,
-        ]
-    );
-
-    return <ScreenSizeContext.Provider value={value}>{children}</ScreenSizeContext.Provider>;
-};
-
-export default ScreenSizeContextProvider;

package/src/screen-size-context.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-
-export type ScreenSizeContextType = Readonly<{
-    isMobile: boolean;
-    isTablet: boolean;
-    isTabletOrBigger: boolean;
-    isTabletOrSmaller: boolean;
-    isDesktopOrBigger: boolean;
-    isLargeDesktop: boolean;
-    isExtraLargeDesktop: boolean;
-}>;
-
-const ScreenSizeContext = React.createContext<ScreenSizeContextType>({
-    isMobile: false,
-    isTablet: false,
-    isTabletOrBigger: false,
-    isTabletOrSmaller: false,
-    isDesktopOrBigger: false,
-    isLargeDesktop: false,
-    isExtraLargeDesktop: false,
-});
-
-export default ScreenSizeContext;

package/src/search-field.tsx

@@ -1,126 +0,0 @@
-'use client';
-import * as React from 'react';
-import {useFieldProps} from './form-context';
-import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
-import IconSearchRegular from './generated/mistica-icons/icon-search-regular';
-import {useTheme} from './hooks';
-import {iconSize} from './icon-button.css';
-import {FieldEndIcon, TextFieldBaseAutosuggest} from './text-field-base';
-import * as tokens from './text-tokens';
-import {combineRefs} from './utils/common';
-import {createChangeEvent} from './utils/dom';
-import {flushSync} from 'react-dom';
-
-import type {CommonFormFieldProps} from './text-field-base';
-
-export interface SearchFieldProps extends CommonFormFieldProps {
-    onChangeValue?: (value: string, rawValue: string) => void;
-    getSuggestions?: (value: string) => ReadonlyArray<string>;
-    /**
-     * Content to show when there are no suggestions. By default it is not shown.
-     * - true: Show default "no suggestions" text.
-     * - string: Show custom text.
-     */
-    withSuggestionsEmptyCase?: boolean | string;
-    /**
-     * Indicates when suggestions should be shown.
-     * - 'focus': Show suggestions when the input is focused.
-     * - number: Show suggestions after a certain number of characters have been typed.
-     */
-    shouldShowSuggestions?: 'focus' | number;
-    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
-    withStartIcon?: boolean;
-}
-
-const SearchField = React.forwardRef<any, SearchFieldProps>(
-    (
-        {
-            disabled,
-            error,
-            helperText,
-            name,
-            label,
-            optional,
-            validate,
-            validateOnBlurInsideForm,
-            onChange,
-            onChangeValue,
-            onBlur,
-            value,
-            defaultValue,
-            withStartIcon = true,
-            dataAttributes,
-            ...rest
-        },
-        ref
-    ) => {
-        const {texts, t} = useTheme();
-        const inputRef = React.useRef<HTMLInputElement>(null);
-        const [searchValue, setSearchValue] = React.useState(defaultValue || '');
-
-        const isControlledByParent = typeof value !== 'undefined';
-
-        const controlledValue = isControlledByParent ? value : searchValue;
-
-        const handleChangeValue = React.useCallback(
-            (newValue: string, newRawValue: string) => {
-                if (!isControlledByParent) {
-                    setSearchValue(newValue);
-                }
-                onChangeValue?.(newValue, newRawValue);
-            },
-            [isControlledByParent, onChangeValue]
-        );
-
-        const clearInput = React.useCallback(() => {
-            flushSync(() => {
-                handleChangeValue('', '');
-                if (inputRef.current) {
-                    onChange?.(createChangeEvent(inputRef.current, ''));
-                }
-            });
-            // When clearing the field, we need to blur and focus again the input so suggestions are reloaded
-            inputRef?.current?.blur();
-            inputRef?.current?.focus();
-        }, [handleChangeValue, onChange]);
-
-        const fieldProps = useFieldProps({
-            name,
-            label,
-            value: controlledValue,
-            defaultValue: undefined,
-            processValue: (v: string) => v,
-            helperText,
-            optional,
-            error,
-            disabled,
-            onBlur,
-            validate,
-            validateOnBlurInsideForm,
-            onChange,
-            onChangeValue: handleChangeValue,
-        });
-
-        return (
-            <TextFieldBaseAutosuggest
-                ref={combineRefs(inputRef, ref)}
-                startIcon={withStartIcon ? <IconSearchRegular size={iconSize.small} /> : undefined}
-                endIcon={
-                    controlledValue ? (
-                        <FieldEndIcon
-                            Icon={IconCloseRegular}
-                            aria-label={texts.formSearchClear || t(tokens.formSearchClear)}
-                            onPress={clearInput}
-                        />
-                    ) : undefined
-                }
-                {...rest}
-                {...fieldProps}
-                type="search"
-                dataAttributes={{'component-name': 'SearchField', testid: 'SearchField', ...dataAttributes}}
-            />
-        );
-    }
-);
-
-export default SearchField;

package/src/select.css.ts

@@ -1,226 +0,0 @@
-import {style, styleVariants, createVar} from '@vanilla-extract/css';
-import {sprinkles} from './sprinkles.css';
-import * as mq from './media-queries.css';
-import {vars as skinVars} from './skins/skin-contract.css';
-import {
-    fieldEndIconGap,
-    fieldLeftPadding,
-    fieldRightPadding,
-    fieldVars,
-    iconButtonSize,
-} from './text-field-base.css';
-import {pxToRem} from './utils/css';
-
-const top = createVar();
-const left = createVar();
-const transformOrigin = createVar();
-const minWidth = createVar();
-const maxHeight = createVar();
-
-export const vars = {
-    top,
-    left,
-    transformOrigin,
-    minWidth,
-    maxHeight,
-};
-
-export const chevronSize = pxToRem(20);
-export const optionContainerPadding = 8;
-
-export const optionsContainer = style([
-    sprinkles({
-        position: 'fixed',
-        padding: 0,
-        borderRadius: skinVars.borderRadii.input,
-        background: skinVars.colors.backgroundContainer,
-    }),
-    {
-        margin: 0,
-        listStyleType: 'none',
-        top,
-        left,
-        minWidth,
-        boxShadow: '0px 2px 4px 0px #00000033',
-        padding: optionContainerPadding,
-        transformOrigin,
-        transition: 'opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1) .15s',
-        overflowY: 'auto',
-        maxHeight: maxHeight ?? '416px',
-    },
-]);
-
-export const optionsAnimationsVariants = styleVariants({
-    show: {opacity: 1, transform: 'scale(1)'},
-    hide: {opacity: 0, transform: 'scale(0)'},
-});
-
-export const actions = style([
-    sprinkles({display: 'flex', flex: 1, alignItems: 'flex-end'}),
-    {marginTop: 16},
-]);
-
-const selectContainerBase = style([
-    sprinkles({
-        position: 'relative',
-        cursor: 'pointer',
-    }),
-    {
-        outline: 'none',
-        '@media': {
-            [mq.tabletOrSmaller]: {
-                width: '100%',
-            },
-        },
-    },
-]);
-
-export const selectContainerVariants = styleVariants({
-    default: [
-        selectContainerBase,
-        {
-            '@media': {
-                [mq.desktopOrBigger]: {
-                    width: 'fit-content',
-                },
-            },
-        },
-    ],
-    fullWidth: [
-        selectContainerBase,
-        {
-            '@media': {
-                [mq.desktopOrBigger]: {
-                    width: '100%',
-                },
-            },
-        },
-    ],
-});
-
-const selectBase = style([
-    sprinkles({
-        border: 'none',
-        overflow: 'hidden',
-        color: skinVars.colors.textPrimary,
-        background: 'transparent', // FieldContainer gives the correct background color
-        width: '100%',
-        paddingY: 0,
-        borderRadius: skinVars.borderRadii.input,
-    }),
-    {
-        // the outline is set in the field container
-        outline: 'none',
-        fontFamily: 'inherit',
-        paddingRight: `calc(${iconButtonSize} + ${fieldEndIconGap}px)`,
-        paddingLeft: fieldLeftPadding,
-        textOverflow: 'ellipsis',
-        appearance: 'none',
-
-        lineHeight: fieldVars.mobileLineHeight,
-        fontSize: fieldVars.mobileFontSize,
-        '@media': {
-            [mq.desktopOrBigger]: {
-                fontSize: fieldVars.desktopFontSize,
-                lineHeight: fieldVars.desktopLineHeight,
-            },
-        },
-    },
-]);
-
-export const selectVariants = styleVariants({
-    default: [
-        selectBase,
-        {
-            cursor: 'pointer',
-        },
-    ],
-    disabled: [
-        selectBase,
-        {
-            cursor: 'default',
-        },
-    ],
-});
-
-const selectTextBase = style([
-    sprinkles({
-        position: 'absolute',
-        overflow: 'hidden',
-        maxWidth: '100%',
-        color: skinVars.colors.textPrimary,
-    }),
-    {
-        pointerEvents: 'none',
-        top: 1, // for border
-        left: fieldLeftPadding + 1, // +1 for border
-        right: `calc(${iconButtonSize} + ${fieldEndIconGap}px + 1px)`, // +1 for border
-        fontSize: fieldVars.mobileFontSize,
-        lineHeight: fieldVars.mobileLineHeight,
-        '@media': {
-            [mq.desktopOrBigger]: {
-                lineHeight: fieldVars.desktopLineHeight,
-                fontSize: fieldVars.desktopFontSize,
-            },
-        },
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-    },
-]);
-
-export const selectTextVariants = styleVariants({
-    default: [selectTextBase, {opacity: 1}],
-    disabled: [selectTextBase, {opacity: 0.5}],
-});
-
-export const arrowDown = style([
-    sprinkles({
-        position: 'absolute',
-    }),
-    {
-        right: fieldRightPadding,
-        top: `calc(50% - ${iconButtonSize} / 2)`,
-        pointerEvents: 'none',
-    },
-]);
-
-export const iconContainer = style({
-    width: iconButtonSize,
-    height: iconButtonSize,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    // remove extra button space on the right so that icon is not too far from field's container
-    marginRight: -14,
-});
-
-export const menuItem = style([
-    sprinkles({
-        color: skinVars.colors.textPrimary,
-        display: 'flex',
-        alignItems: 'center',
-        cursor: 'pointer',
-        paddingY: 8,
-        paddingX: 8,
-    }),
-    {
-        borderRadius: `calc(${skinVars.borderRadii.popup} - ${optionContainerPadding / 2}px)`,
-    },
-
-    {
-        height: pxToRem(48),
-        transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-
-        '@media': {
-            [mq.supportsHover]: {
-                ':hover': {
-                    backgroundColor: skinVars.colors.backgroundContainerHover,
-                },
-            },
-        },
-    },
-]);
-
-export const menuItemSelected = sprinkles({
-    background: skinVars.colors.backgroundAlternative,
-});