@telefonica/mistica 16.60.0 → 16.62.0-beta.1

package/src/responsive-layout.tsx

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

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

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

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

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

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

@@ -0,0 +1,226 @@
+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,
+});