@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/doc/llms.md

@@ -15,30 +15,6 @@ This file is the main entry point. All docs live at:
 If you cannot find a documentation file in `node_modules`, fetch the equivalent file from the GitHub
 repository at `https://github.com/Telefonica/mistica-web/blob/master/doc/<filename>`.
 
-## Source code location
-
-The full TypeScript/TSX source of this package is shipped inside the published tarball and is available
-alongside the compiled output and type definitions. Use it as a **complementary** reference whenever the docs
-or `.d.ts` files don't fully answer a question about a component's real behavior, props, or internals.
-
-- **Installed package**: `node_modules/@telefonica/mistica/src/`
-- **GitHub fallback**: `https://github.com/Telefonica/mistica-web/tree/master/src`
-
-What you'll find there:
-
-- `src/**/*.tsx`, `src/**/*.ts` — production component source
-- `src/**/*.css.ts` — vanilla-extract style definitions
-- `src/index.tsx` and `src/community/index.tsx` — public entry points; start here to map an import to a file
-
-Recommended lookup workflow:
-
-1. Resolve the import path the consumer uses (e.g. `import {Button} from '@telefonica/mistica'` or
-   `'@telefonica/mistica/community'`).
-2. Open `node_modules/@telefonica/mistica/src/index.tsx` (or `src/community/index.tsx`) to find which file the
-   symbol is re-exported from.
-3. Read that source file (and its `*.css.ts` sibling, if any) for real props, types, default values, and
-   behavior.
-
 ## Critical Rules
 
 1. **NEVER hardcode colors in app/component UI code.** Always use `skinVars.colors.*` design tokens from

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "16.59.0-beta.1",
+    "version": "16.60.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -14,18 +14,6 @@
         "dist-es/**",
         "css/**",
         "doc/**",
-        "src/**",
-        "!src/generated/**",
-        "!src/**/__tests__/**",
-        "!src/**/__acceptance_tests__/**",
-        "!src/**/__screenshot_tests__/**",
-        "!src/**/__type_tests__/**",
-        "!src/**/__stories__/**",
-        "!src/**/__private_stories__/**",
-        "!src/**/*-test.ts",
-        "!src/**/*-test.tsx",
-        "!src/**/*-story.ts",
-        "!src/**/*-story.tsx",
         "community.d.ts",
         "community.js"
     ],
@@ -153,7 +141,7 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.3.1",
-        "@tef-novum/webview-bridge": "^4.2.0",
+        "@tef-novum/webview-bridge": "^5.1.0",
         "@telefonica/libphonenumber": "^2.9.1",
         "@vanilla-extract/css": "^1.17.5",
         "@vanilla-extract/dynamic": "^2.1.5",

package/src/accordion.css.ts

@@ -1,121 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import * as mq from './media-queries.css';
-import {vars} from './skins/skin-contract.css';
-import {sprinkles} from './sprinkles.css';
-
-export const itemContent = sprinkles({
-    width: '100%',
-    border: 'none',
-    background: 'transparent',
-    display: 'block',
-    height: '100%',
-    padding: 0,
-});
-
-export const boxed = style({});
-
-const boxedTouchableBorderRadiusStyles = {
-    [`${boxed} &:active`]: {
-        // needed because we can't use overflow: hidden on the boxed container for the focus ring to be visible
-        borderRadius: `calc(${vars.borderRadii.container} - 1px)`,
-    },
-    [`${boxed} &:hover`]: {
-        // needed because we can't use overflow: hidden on the boxed container for the focus ring to be visible
-        borderRadius: `calc(${vars.borderRadii.container} - 1px)`,
-    },
-    [`${boxed} &[aria-expanded="true"]`]: {
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-    },
-};
-
-export const touchableBackground = style({
-    transition: 'background-color 0.1s ease-in-out',
-    ':active': {
-        background: vars.colors.backgroundContainerPressed,
-    },
-    '@media': {
-        [mq.supportsHover]: {
-            ':hover': {
-                background: vars.colors.backgroundContainerHover,
-            },
-            ':active': {
-                background: vars.colors.backgroundContainerPressed,
-            },
-        },
-        [mq.touchableOnly]: {
-            transition: 'none',
-        },
-    },
-    selectors: boxedTouchableBorderRadiusStyles,
-});
-
-export const touchableBackgroundOverBrand = style({
-    transition: 'background-color 0.1s ease-in-out',
-    ':active': {
-        background: vars.colors.backgroundContainerBrandPressed,
-    },
-    '@media': {
-        [mq.supportsHover]: {
-            ':hover': {
-                background: vars.colors.backgroundContainerBrandHover,
-            },
-            ':active': {
-                background: vars.colors.backgroundContainerBrandPressed,
-            },
-        },
-        [mq.touchableOnly]: {
-            transition: 'none',
-        },
-    },
-    selectors: boxedTouchableBorderRadiusStyles,
-});
-
-export const rightContentContainer = style({
-    height: '100%',
-});
-
-export const chevronContainer = style({
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-});
-
-export const panelContainer = style({
-    display: 'grid',
-});
-
-export const panelTransitionClasses = {
-    enter: style({
-        gridTemplateRows: '0fr',
-    }),
-    enterActive: style({
-        gridTemplateRows: '1fr',
-        transition: 'grid-template-rows 0.4s',
-        '@media': {
-            ['(prefers-reduced-motion)']: {
-                transition: 'none',
-            },
-        },
-    }),
-    exit: style({
-        gridTemplateRows: '1fr',
-    }),
-    exitActive: style({
-        gridTemplateRows: '0fr',
-        transition: 'grid-template-rows 0.4s',
-        '@media': {
-            ['(prefers-reduced-motion)']: {
-                transition: 'none',
-            },
-        },
-    }),
-};
-
-export const panel = style({
-    overflow: 'hidden',
-});
-
-export const accordionItem = sprinkles({
-    width: '100%',
-});

package/src/accordion.tsx

@@ -1,366 +0,0 @@
-'use client';
-import * as React from 'react';
-import {Content as HeaderContent} from './list';
-import IconChevron from './icons/icon-chevron';
-import Box from './box';
-import * as styles from './accordion.css';
-import Stack from './stack';
-import {BaseTouchable} from './touchable';
-import classNames from 'classnames';
-import {vars as skinVars} from './skins/skin-contract.css';
-import {getPrefixedDataAttributes} from './utils/dom';
-import Divider from './divider';
-import {InternalBoxed} from './boxed';
-import {useThemeVariant} from './theme-variant-context';
-import {CSSTransition} from 'react-transition-group';
-import {isRunningAcceptanceTest} from './utils/platform';
-import Inline from './inline';
-
-import type {ExclusifyUnion} from './utils/utility-types';
-import type {DataAttributes, TrackingEvent} from './utils/types';
-import type {TouchableElement} from './touchable';
-
-const ACCORDION_TRANSITION_DURATION_IN_MS = 400;
-
-type AccordionContextType = {
-    index: ReadonlyArray<number>;
-    toggle: (item: number) => void;
-};
-
-const AccordionContext = React.createContext<AccordionContextType>({
-    index: [],
-    toggle: () => {},
-});
-
-const useAccordionContext = (): AccordionContextType => React.useContext(AccordionContext);
-
-interface AccordionItemContentProps {
-    children?: void;
-    title: string;
-    titleAs?: string;
-    subtitle?: string;
-    asset?: React.ReactNode;
-    content: React.ReactNode;
-    dataAttributes?: DataAttributes;
-    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-    role?: string;
-    detail?: string;
-    right?: React.ReactNode;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-}
-
-const useAccordionState = ({
-    value,
-    defaultValue,
-    onChange,
-    singleOpen,
-}: {
-    value?: number | ReadonlyArray<number>;
-    defaultValue?: number | ReadonlyArray<number>;
-    onChange?: (item: number, value: boolean) => void;
-    singleOpen?: boolean;
-}): [ReadonlyArray<number>, (value: number) => void] => {
-    const isControlledByParent = value !== undefined;
-
-    const getValueAsList = (value?: number | ReadonlyArray<number>) => {
-        return value === undefined ? [] : typeof value === 'number' ? [value] : value;
-    };
-
-    const [index, setIndex] = React.useState<ReadonlyArray<number>>(getValueAsList(defaultValue));
-
-    React.useEffect(() => {
-        if (index.length > 1 && singleOpen) {
-            const newIndex = [...index];
-            newIndex.splice(1);
-            setIndex(newIndex);
-        }
-    }, [singleOpen, index]);
-
-    const updateIndexOnToggle = (item: number, index?: ReadonlyArray<number>) => {
-        if (!index) {
-            return [item];
-        }
-
-        const valueIndex = index.indexOf(item);
-        let newIndex = [...index];
-        if (valueIndex === -1) {
-            if (singleOpen) {
-                newIndex = [item];
-            } else {
-                newIndex.push(item);
-            }
-        } else {
-            newIndex.splice(valueIndex, 1);
-        }
-
-        return newIndex;
-    };
-
-    const toggle = (item: number) => {
-        if (!isControlledByParent) {
-            setIndex(updateIndexOnToggle(item, index));
-        }
-        if (onChange) {
-            const currentItemValue = (isControlledByParent ? getValueAsList(value) : index).includes(item);
-            onChange(item, !currentItemValue);
-        }
-    };
-
-    if (isControlledByParent) {
-        return [getValueAsList(value), toggle];
-    }
-
-    return [index, toggle];
-};
-
-const getAccordionItemIndex = (element: Element | null) => {
-    const accordionAncestor = element?.closest('[data-accordion]');
-    if (!accordionAncestor) return undefined;
-
-    return Array.from(accordionAncestor.querySelectorAll('[data-accordion-item]'))
-        .filter((e) => e.closest('[data-accordion]') === accordionAncestor)
-        .findIndex((e) => e === element);
-};
-
-const getAssetText = (asset: React.ReactNode): string => {
-    if (!React.isValidElement(asset)) return '';
-
-    const props = asset.props as {alt?: unknown; 'aria-label'?: unknown};
-
-    if (typeof props.alt === 'string' && props.alt.trim()) {
-        return props.alt.trim();
-    }
-
-    if (typeof props['aria-label'] === 'string' && props['aria-label'].trim()) {
-        return props['aria-label'].trim();
-    }
-
-    return '';
-};
-
-const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemContentProps>(
-    (
-        {
-            content,
-            dataAttributes,
-            trackingEvent,
-            right,
-            'aria-label': ariaLabel,
-            'aria-labelledby': ariaLabelledby,
-            ...props
-        },
-        ref
-    ) => {
-        const panelContainerRef = React.useRef<HTMLDivElement | null>(null);
-        const itemRef = React.useRef<HTMLDivElement | null>(null);
-        const {index, toggle} = useAccordionContext();
-        const variant = useThemeVariant();
-        const labelId = React.useId();
-        const panelId = React.useId();
-
-        const assetText = getAssetText(props.asset);
-
-        const computedAriaLabel = ariaLabel ?? [props.title, assetText].filter(Boolean).join(' ');
-
-        const [itemIndex, setItemIndex] = React.useState<number>();
-        const isOpen = itemIndex !== undefined && index?.includes(itemIndex);
-
-        React.useEffect(() => {
-            setItemIndex(getAccordionItemIndex(itemRef.current));
-        }, []);
-
-        const iconColor = {
-            default: isOpen ? skinVars.colors.chevronIndicator : skinVars.colors.chevronIndicator,
-            alternative: isOpen ? skinVars.colors.chevronIndicator : skinVars.colors.chevronIndicator,
-            brand: skinVars.colors.textSecondaryBrand,
-            media: skinVars.colors.textSecondaryBrand,
-            negative: skinVars.colors.textSecondaryNegative,
-        }[variant];
-
-        return (
-            <div ref={itemRef} {...getPrefixedDataAttributes({...dataAttributes, 'accordion-item': true})}>
-                <BaseTouchable
-                    ref={ref}
-                    className={classNames(
-                        styles.itemContent,
-                        variant === 'brand' || variant === 'media' || variant === 'negative'
-                            ? styles.touchableBackgroundOverBrand
-                            : styles.touchableBackground
-                    )}
-                    onPress={() => {
-                        if (itemIndex !== undefined) toggle(itemIndex);
-                    }}
-                    trackingEvent={trackingEvent}
-                    aria-expanded={isOpen}
-                    aria-controls={panelId}
-                    aria-label={computedAriaLabel}
-                    aria-labelledby={ariaLabelledby}
-                >
-                    <Box paddingX={16}>
-                        <HeaderContent
-                            labelId={labelId}
-                            {...props}
-                            right={({centerY}) => (
-                                <Inline
-                                    space={4}
-                                    alignItems={centerY ? 'center' : undefined}
-                                    className={styles.rightContentContainer}
-                                >
-                                    {right}
-                                    <div className={styles.chevronContainer}>
-                                        <IconChevron
-                                            size={20}
-                                            transitionDuration={ACCORDION_TRANSITION_DURATION_IN_MS}
-                                            direction={isOpen ? 'up' : 'down'}
-                                            color={iconColor}
-                                        />
-                                    </div>
-                                </Inline>
-                            )}
-                        />
-                    </Box>
-                </BaseTouchable>
-                <CSSTransition
-                    in={isOpen}
-                    timeout={isRunningAcceptanceTest() ? 0 : ACCORDION_TRANSITION_DURATION_IN_MS}
-                    nodeRef={panelContainerRef}
-                    classNames={styles.panelTransitionClasses}
-                    mountOnEnter
-                    unmountOnExit
-                >
-                    <div className={styles.panelContainer} ref={panelContainerRef}>
-                        <div className={styles.panel} role="region" aria-labelledby={labelId} id={panelId}>
-                            <Box paddingX={16} paddingBottom={16}>
-                                {content}
-                            </Box>
-                        </div>
-                    </div>
-                </CSSTransition>
-            </div>
-        );
-    }
-);
-
-export const AccordionItem = React.forwardRef<TouchableElement, AccordionItemContentProps>(
-    ({dataAttributes, role, ...props}, ref) => (
-        <div role={role} className={styles.accordionItem}>
-            <AccordionItemContent
-                {...props}
-                ref={ref}
-                dataAttributes={{'component-name': 'AccordionItem', ...dataAttributes}}
-            />
-        </div>
-    )
-);
-
-type AccordionBaseProps = {
-    children: React.ReactNode;
-    dataAttributes?: DataAttributes;
-    onChange?: (index: number, value: boolean) => void;
-    role?: string;
-};
-
-type SingleOpenProps = {
-    singleOpen: true;
-    index?: number;
-    defaultIndex?: number;
-};
-
-type MultipleOpenProps = {
-    singleOpen?: false;
-    index?: number | ReadonlyArray<number>;
-    defaultIndex?: number | ReadonlyArray<number>;
-};
-
-type AccordionProps = AccordionBaseProps & ExclusifyUnion<SingleOpenProps | MultipleOpenProps>;
-
-export const Accordion = ({
-    children,
-    dataAttributes,
-    index,
-    defaultIndex,
-    onChange,
-    singleOpen,
-    role,
-}: AccordionProps): JSX.Element => {
-    const [indexList, toggle] = useAccordionState({
-        value: index,
-        defaultValue: defaultIndex,
-        onChange,
-        singleOpen,
-    });
-    const childrenContent = React.Children.toArray(children).filter(Boolean);
-    const lastIndex = childrenContent.length - 1;
-
-    return (
-        <AccordionContext.Provider value={{index: indexList, toggle}}>
-            <div
-                role={role}
-                {...getPrefixedDataAttributes({...dataAttributes, accordion: true}, 'Accordion')}
-            >
-                {childrenContent.map((child, index) => (
-                    <React.Fragment key={index}>
-                        {child}
-                        {index < lastIndex && (
-                            <Box paddingX={16}>
-                                <Divider />
-                            </Box>
-                        )}
-                    </React.Fragment>
-                ))}
-            </div>
-        </AccordionContext.Provider>
-    );
-};
-
-interface BoxedAccordionItemProps extends AccordionItemContentProps {
-    /**
-     * @deprecated Use `variant="brand"` instead.
-     */
-    isInverse?: boolean;
-    variant?: 'default' | 'brand';
-}
-
-export const BoxedAccordionItem = React.forwardRef<HTMLDivElement, BoxedAccordionItemProps>(
-    ({dataAttributes, isInverse, variant, ...props}, ref) => (
-        <InternalBoxed
-            overflow="visible"
-            className={styles.boxed}
-            variant={variant ?? (isInverse ? 'brand' : 'default')}
-            ref={ref}
-            dataAttributes={{'component-name': 'BoxedAccordionItem', ...dataAttributes}}
-        >
-            <AccordionItemContent {...props} />
-        </InternalBoxed>
-    )
-);
-
-export const BoxedAccordion = ({
-    children,
-    dataAttributes,
-    index,
-    defaultIndex,
-    onChange,
-    singleOpen,
-    role,
-}: AccordionProps): JSX.Element => {
-    const [indexList, toggle] = useAccordionState({
-        value: index,
-        defaultValue: defaultIndex,
-        onChange,
-        singleOpen,
-    });
-
-    return (
-        <AccordionContext.Provider value={{index: indexList, toggle}}>
-            <Stack
-                space={16}
-                role={role}
-                dataAttributes={{'component-name': 'BoxedAccordion', accordion: true, ...dataAttributes}}
-            >
-                {children}
-            </Stack>
-        </AccordionContext.Provider>
-    );
-};

package/src/align.css.ts

@@ -1,7 +0,0 @@
-import {style} from '@vanilla-extract/css';
-
-export const container = style({
-    display: 'grid',
-    width: '100%',
-    height: '100%',
-});

package/src/align.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import {getPrefixedDataAttributes} from './utils/dom';
-import * as styles from './align.css';
-
-import type {DataAttributes} from './utils/types';
-
-type Props = {
-    x?: 'start' | 'center' | 'end';
-    y?: 'start' | 'center' | 'end';
-    width?: number | string;
-    height?: number | string;
-    children?: React.ReactNode;
-    dataAttributes?: DataAttributes;
-};
-
-const Align = ({x = 'start', y = 'start', width, height, children, dataAttributes}: Props): JSX.Element => {
-    return (
-        <div
-            {...getPrefixedDataAttributes(dataAttributes, 'Align')}
-            className={styles.container}
-            style={{
-                placeItems: `${y} ${x}`,
-                ...(width !== undefined ? {width} : {}),
-                ...(height !== undefined ? {height} : {}),
-            }}
-        >
-            {children}
-        </div>
-    );
-};
-
-export default Align;

package/src/autocomplete.css.ts

@@ -1,62 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {sprinkles} from './sprinkles.css';
-import {vars, vars as skinVars} from './skins/skin-contract.css';
-
-export const optionListContainerPadding = 8;
-
-export const autocompleteContainer = style([
-    sprinkles({
-        position: 'relative',
-    }),
-]);
-
-export const optionsList = style([
-    sprinkles({
-        position: 'absolute',
-        padding: optionListContainerPadding,
-        borderRadius: vars.borderRadii.popup,
-    }),
-    {
-        zIndex: 2,
-        left: 0,
-        right: 0,
-        boxShadow: '0px 2px 4px 0px #00000033',
-        marginTop: 0,
-        backgroundColor: vars.colors.backgroundContainer,
-        listStyle: 'none',
-    },
-]);
-
-export const optionBaseItem = style([
-    sprinkles({
-        paddingX: 8,
-        paddingY: 12,
-    }),
-    {
-        borderRadius: `calc(${skinVars.borderRadii.popup} - ${optionListContainerPadding / 2}px)`,
-        height: 48,
-        userSelect: 'none',
-        display: 'block',
-    },
-]);
-
-export const optionItem = style([
-    optionBaseItem,
-    sprinkles({
-        cursor: 'pointer',
-    }),
-    {
-        selectors: {
-            '&:hover': {
-                backgroundColor: vars.colors.backgroundContainerHover,
-            },
-            '&:active': {
-                backgroundColor: vars.colors.backgroundContainerPressed,
-            },
-        },
-    },
-]);
-
-export const optionItemSelected = style({
-    backgroundColor: vars.colors.backgroundContainerHover,
-});