@telefonica/mistica 17.8.0 → 17.10.0

package/src/message.css.ts

@@ -0,0 +1,148 @@
+import {globalStyle, style, styleVariants} from '@vanilla-extract/css';
+import {vars} from './skins/skin-contract.css';
+
+const bubbleRadius = '4px';
+export const minimumBubbleSize = 48;
+export const bubblePaddingY = 12;
+export const bubblePaddingX = 16;
+export const minimumErrorWidth = 184;
+const boxedErrorInset = 16;
+const actionsGap = 16;
+const actionsInset = 4;
+
+export const message = style({display: 'flex', width: 'fit-content', minWidth: 0});
+export const direction = styleVariants({
+    incoming: {},
+    outgoing: {flexDirection: 'row-reverse', marginLeft: 'auto'},
+});
+export const asset = style({flexShrink: 0});
+export const assetAlignment = styleVariants({
+    incoming: {alignSelf: 'flex-start', marginRight: 8},
+    outgoing: {alignSelf: 'flex-start', marginLeft: 8},
+});
+export const unboxedAssetSpacing = styleVariants({
+    incoming: {marginRight: 12},
+    outgoing: {marginLeft: 12},
+});
+export const messageContent = style({display: 'flex', flexDirection: 'column', minWidth: 0});
+export const row = style({display: 'flex', width: '100%', minWidth: 0, alignItems: 'flex-start'});
+export const rowDirection = styleVariants({incoming: {}, outgoing: {flexDirection: 'row-reverse'}});
+export const column = style({display: 'flex', flexDirection: 'column', minWidth: 0});
+export const touchable = style({textAlign: 'left', minWidth: 0, borderRadius: vars.borderRadii.container});
+export const corners = styleVariants({
+    'incoming-standalone': {borderTopLeftRadius: bubbleRadius},
+    'incoming-first': {borderBottomLeftRadius: bubbleRadius},
+    'incoming-middle': {borderTopLeftRadius: bubbleRadius, borderBottomLeftRadius: bubbleRadius},
+    'incoming-last': {borderTopLeftRadius: bubbleRadius},
+    'outgoing-standalone': {borderBottomRightRadius: bubbleRadius},
+    'outgoing-first': {borderBottomRightRadius: bubbleRadius},
+    'outgoing-middle': {borderTopRightRadius: bubbleRadius, borderBottomRightRadius: bubbleRadius},
+    'outgoing-last': {borderTopRightRadius: bubbleRadius},
+});
+export const bubble = style({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    borderRadius: 'inherit',
+    overflowWrap: 'anywhere',
+});
+export const boxed = style({
+    boxSizing: 'border-box',
+    padding: `${bubblePaddingY}px ${bubblePaddingX}px`,
+    minWidth: minimumBubbleSize,
+    minHeight: minimumBubbleSize,
+});
+export const incomingBackground = styleVariants({
+    default: {background: vars.colors.messageBubbleBackgroundIncoming},
+    brand: {background: vars.colors.messageBubbleBackgroundIncomingBrand},
+    negative: {background: vars.colors.messageBubbleBackgroundIncomingNegative},
+    alternative: {background: vars.colors.messageBubbleBackgroundIncomingAlternative},
+    media: {background: vars.colors.messageBubbleBackgroundIncomingMedia},
+});
+export const outgoingBackground = styleVariants({
+    default: {background: vars.colors.messageBubbleBackgroundOutgoing},
+    brand: {background: vars.colors.messageBubbleBackgroundOutgoingBrand},
+    negative: {background: vars.colors.messageBubbleBackgroundOutgoingNegative},
+    alternative: {background: vars.colors.messageBubbleBackgroundOutgoingAlternative},
+    media: {background: vars.colors.messageBubbleBackgroundOutgoingMedia},
+});
+export const errorBackground = style({background: vars.colors.backgroundContainerError});
+export const interactive = style({
+    selectors: {
+        [`${touchable}:hover &`]: {
+            backgroundImage: `linear-gradient(${vars.colors.backgroundContainerHover}, ${vars.colors.backgroundContainerHover})`,
+        },
+        [`${touchable}:active &`]: {
+            backgroundImage: `linear-gradient(${vars.colors.backgroundContainerPressed}, ${vars.colors.backgroundContainerPressed})`,
+        },
+    },
+});
+export const content = style({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    minWidth: 0,
+    whiteSpace: 'pre-wrap',
+});
+export const contentSlot = style({minWidth: 0, maxWidth: '100%', overflowX: 'auto', overflowY: 'hidden'});
+globalStyle(`${contentSlot} > *`, {maxWidth: '100%'});
+export const timestamp = style({alignSelf: 'flex-end'});
+export const actions = style({display: 'flex', flexShrink: 0, alignItems: 'center', gap: actionsGap});
+export const footerActions = style({marginTop: actionsInset, flexWrap: 'wrap'});
+export const sideActions = styleVariants({
+    incoming: {marginLeft: actionsInset},
+    outgoing: {marginRight: actionsInset},
+});
+export const outgoingFooterActions = style({justifyContent: 'flex-end'});
+const maximumSideSlotWidth = '40%';
+export const sideSlot = style({
+    display: 'flex',
+    flexShrink: 0,
+    alignItems: 'center',
+    minWidth: 0,
+    maxWidth: maximumSideSlotWidth,
+    overflowX: 'auto',
+    overflowY: 'hidden',
+});
+globalStyle(`${sideSlot} > *`, {maxWidth: '100%'});
+export const unboxedActions = style({marginLeft: -8});
+export const error = style({
+    boxSizing: 'border-box',
+    display: 'grid',
+    gridTemplateColumns: 'auto minmax(0, 1fr)',
+    alignItems: 'flex-start',
+    gap: 4,
+    marginTop: 4,
+    minWidth: 0,
+    overflowWrap: 'anywhere',
+});
+export const boxedError = style({paddingInline: boxedErrorInset});
+export const errorIcon = style({
+    display: 'block',
+    width: ['1rem', '1lh'],
+    height: ['1rem', '1lh'],
+});
+
+export const body = style({display: 'flex', flexDirection: 'column', gap: 4});
+export const inlineTimestamp = style({flexDirection: 'row', alignItems: 'baseline', gap: 8});
+export const text = style({display: 'inline-block', maxWidth: '100%'});
+
+export const footer = style({
+    minWidth: 0,
+    maxWidth: '100%',
+    overflowWrap: 'anywhere',
+    overflowX: 'auto',
+    overflowY: 'hidden',
+});
+globalStyle(`${footer} > *`, {maxWidth: '100%'});
+export const errorFooter = style({width: 0, minWidth: '100%', overflowWrap: 'anywhere'});
+export const shortErrorLayout = styleVariants({
+    incoming: {display: 'flex', flexDirection: 'column', alignItems: 'flex-start'},
+    outgoing: {display: 'flex', flexDirection: 'column', alignItems: 'flex-end'},
+});
+export const shortErrorFooter = style({
+    width: 'max-content',
+    minWidth: 0,
+    maxWidth: `max(100%, ${minimumErrorWidth}px)`,
+    flexShrink: 0,
+});

package/src/message.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import * as React from 'react';
+import classnames from 'classnames';
+import Touchable from './touchable';
+import Avatar from './avatar';
+import {Text1, Text2} from './text';
+import {IconButton} from './icon-button';
+import IconWarningRegular from './generated/mistica-icons/icon-warning-regular';
+import ScreenReaderOnly from './screen-reader-only';
+import {ThemeVariant, useThemeVariant} from './theme-variant-context';
+import {useElementDimensions, useTheme} from './hooks';
+import {vars} from './skins/skin-contract.css';
+import {getPrefixedDataAttributes} from './utils/dom';
+import * as tokens from './text-tokens';
+import * as styles from './message.css';
+
+import type {IconButtonProps} from './icon-button';
+import type {PressHandler, TouchableComponentProps} from './touchable';
+import type {ExclusifyUnion} from './utils/utility-types';
+
+type MessageAction = IconButtonProps & {
+    small?: never;
+    type?: never;
+    bleedLeft?: never;
+    bleedRight?: never;
+    bleedY?: never;
+};
+type MessageActions = readonly [MessageAction] | readonly [MessageAction, MessageAction];
+const avatarSize = 40;
+const maximumActions = 2;
+
+export type MessageProps = TouchableComponentProps<
+    {
+        type: 'incoming' | 'outgoing';
+        senderName?: string;
+        senderNameAs?: 'span' | 'p' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+        senderNameLabel?: string;
+        timestamp?: string;
+        timestampLabel?: string;
+        asset?: React.ReactElement;
+        boxed?: boolean;
+        /** Maximum width of the whole message, including its asset and side actions. Defaults to 80%.
+         * Error feedback can exceed this limit up to 184px to avoid illegible wrapping.
+         */
+        maxWidth?: number | string;
+        position?: 'standalone' | 'first' | 'middle' | 'last';
+    } & ExclusifyUnion<
+        {onAssetPress: PressHandler; assetLabel: string} | {onAssetPress?: undefined; assetLabel?: undefined}
+    > & {
+            contentText?: string;
+            contentSlot?: React.ReactNode;
+            footerSlot?: React.ReactNode;
+            sideSlot?: React.ReactNode;
+            /** Up to two actions. Extra actions from untyped consumers are ignored. */
+            actions?: MessageActions;
+            actionsPosition?: 'side' | 'footer';
+        } & ExclusifyUnion<{error: true; errorMessage: string} | {error?: false}>
+>;
+
+const Message = ({
+    type,
+    senderName,
+    senderNameAs = 'span',
+    senderNameLabel,
+    timestamp,
+    timestampLabel,
+    asset,
+    onAssetPress,
+    assetLabel,
+    boxed = true,
+    maxWidth = '80%',
+    position = 'standalone',
+    contentText,
+    contentSlot,
+    footerSlot,
+    sideSlot,
+    actions,
+    actionsPosition = 'footer',
+    error = false,
+    errorMessage,
+    dataAttributes,
+    ...touchableProps
+}: MessageProps): JSX.Element => {
+    const {t} = useTheme();
+    const variant = useThemeVariant();
+    const id = React.useId();
+    const {width: textWidth, ref: textRef} = useElementDimensions();
+    const {width: bubbleContentWidth, height: bubbleContentHeight, ref: bubbleRef} = useElementDimensions();
+    const bubbleHeight = bubbleContentHeight + (boxed ? styles.bubblePaddingY * 2 : 0);
+    const bubbleWidth = bubbleContentWidth + (boxed ? styles.bubblePaddingX * 2 : 0);
+    const shortError = error && bubbleContentWidth > 0 && bubbleWidth < styles.minimumErrorWidth;
+    const inlineTimestamp = boxed && !contentSlot && textWidth > 0 && textWidth < styles.minimumBubbleSize;
+    const showTimestamp = !!timestamp && !(error && type === 'outgoing');
+    const isInteractive = !!(touchableProps.onPress || touchableProps.href || touchableProps.to);
+    const directionLabel = t(type === 'incoming' ? tokens.messageIncoming : tokens.messageOutgoing);
+    const renderActions = () =>
+        actions
+            ?.slice(0, maximumActions)
+            .map((action, index) => <IconButton key={index} {...action} small type="neutral" />);
+
+    const accessibleIds = [
+        `${id}-direction`,
+        (senderName || senderNameLabel) && `${id}-sender`,
+        `${id}-content`,
+        showTimestamp && `${id}-timestamp`,
+        error && `${id}-error`,
+    ]
+        .filter(Boolean)
+        .join(' ');
+
+    return (
+        <div
+            className={classnames(styles.message, styles.direction[type])}
+            style={{maxWidth}}
+            {...getPrefixedDataAttributes({testid: 'Message', ...dataAttributes})}
+        >
+            {asset && (
+                <div
+                    className={classnames(styles.asset, styles.assetAlignment[type], {
+                        [styles.unboxedAssetSpacing[type]]: !boxed,
+                    })}
+                    style={
+                        type === 'outgoing' && bubbleHeight
+                            ? {transform: `translateY(calc(${bubbleHeight}px - 100%))`}
+                            : undefined
+                    }
+                >
+                    <Touchable maybe onPress={onAssetPress} aria-label={assetLabel}>
+                        <span aria-hidden>
+                            {React.isValidElement<{size: number}>(asset) && asset.type === Avatar
+                                ? React.cloneElement(asset, {size: avatarSize})
+                                : asset}
+                        </span>
+                    </Touchable>
+                </div>
+            )}
+            <div className={classnames(styles.messageContent, {[styles.shortErrorLayout[type]]: shortError})}>
+                <div className={classnames(styles.row, styles.rowDirection[type])}>
+                    <div className={styles.column}>
+                        <Touchable
+                            {...touchableProps}
+                            maybe
+                            aria-labelledby={
+                                touchableProps['aria-label']
+                                    ? undefined
+                                    : touchableProps['aria-labelledby'] ??
+                                      (isInteractive ? accessibleIds : undefined)
+                            }
+                            className={classnames(
+                                styles.touchable,
+                                styles.corners[`${type}-${error ? 'standalone' : position}`]
+                            )}
+                        >
+                            <ThemeVariant variant={boxed ? 'default' : variant}>
+                                <div
+                                    ref={bubbleRef}
+                                    data-testid="MessageBubble"
+                                    className={classnames(styles.bubble, {
+                                        [styles.boxed]: boxed,
+                                        [styles.incomingBackground[variant]]:
+                                            boxed && type === 'incoming' && !error,
+                                        [styles.outgoingBackground[variant]]:
+                                            boxed && type === 'outgoing' && !error,
+                                        [styles.errorBackground]: boxed && error,
+                                        [styles.interactive]: boxed && isInteractive,
+                                    })}
+                                >
+                                    <ScreenReaderOnly>
+                                        <span id={`${id}-direction`}>{directionLabel}: </span>
+                                    </ScreenReaderOnly>
+                                    {(senderName || senderNameLabel) &&
+                                        (senderName ? (
+                                            <Text1
+                                                medium
+                                                as={senderNameAs}
+                                                id={`${id}-sender`}
+                                                color={
+                                                    !boxed &&
+                                                    variant !== 'default' &&
+                                                    variant !== 'alternative'
+                                                        ? vars.colors.textPrimary
+                                                        : vars.colors.textBrand
+                                                }
+                                            >
+                                                {senderNameLabel ? (
+                                                    <>
+                                                        <span aria-hidden>{senderName}</span>
+                                                        <ScreenReaderOnly>
+                                                            <span>{senderNameLabel}</span>
+                                                        </ScreenReaderOnly>
+                                                    </>
+                                                ) : (
+                                                    senderName
+                                                )}
+                                            </Text1>
+                                        ) : (
+                                            <ScreenReaderOnly>
+                                                <span id={`${id}-sender`}>{senderNameLabel}</span>
+                                            </ScreenReaderOnly>
+                                        ))}
+                                    <div
+                                        className={classnames(styles.body, {
+                                            [styles.inlineTimestamp]: inlineTimestamp,
+                                        })}
+                                    >
+                                        <div className={styles.content} id={`${id}-content`}>
+                                            {contentText !== undefined && (
+                                                <Text2 regular as="p">
+                                                    <span ref={textRef} className={styles.text}>
+                                                        {contentText}
+                                                    </span>
+                                                </Text2>
+                                            )}
+                                            {contentSlot !== undefined && (
+                                                <div className={styles.contentSlot}>{contentSlot}</div>
+                                            )}
+                                        </div>
+                                        {showTimestamp && (
+                                            <div className={boxed ? styles.timestamp : undefined}>
+                                                <Text1
+                                                    regular
+                                                    as="span"
+                                                    id={`${id}-timestamp`}
+                                                    color={
+                                                        boxed
+                                                            ? type === 'outgoing'
+                                                                ? vars.colors.textPrimary
+                                                                : vars.colors.textSecondary
+                                                            : undefined
+                                                    }
+                                                >
+                                                    {timestampLabel ? (
+                                                        <>
+                                                            <span aria-hidden>{timestamp}</span>
+                                                            <ScreenReaderOnly>
+                                                                <span>{timestampLabel}</span>
+                                                            </ScreenReaderOnly>
+                                                        </>
+                                                    ) : (
+                                                        timestamp
+                                                    )}
+                                                </Text1>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            </ThemeVariant>
+                        </Touchable>
+                        {footerSlot && (
+                            <div className={styles.footer} id={`${id}-footer`}>
+                                {footerSlot}
+                            </div>
+                        )}
+                        {actions && actionsPosition === 'footer' && (
+                            <div
+                                className={classnames(styles.actions, styles.footerActions, {
+                                    [styles.unboxedActions]: !boxed,
+                                    [styles.outgoingFooterActions]: type === 'outgoing',
+                                })}
+                            >
+                                {renderActions()}
+                            </div>
+                        )}
+                    </div>
+                    {sideSlot && (
+                        <div className={styles.sideSlot} style={{height: bubbleHeight || undefined}}>
+                            {sideSlot}
+                        </div>
+                    )}
+                    {actions && actionsPosition === 'side' && (
+                        <div
+                            className={classnames(styles.actions, styles.sideActions[type])}
+                            style={{height: bubbleHeight || undefined}}
+                        >
+                            {renderActions()}
+                        </div>
+                    )}
+                </div>
+                {error && (
+                    <div className={classnames(styles.errorFooter, {[styles.shortErrorFooter]: shortError})}>
+                        <div
+                            className={classnames(styles.error, {
+                                [styles.boxedError]: boxed,
+                            })}
+                            role="alert"
+                            id={`${id}-error`}
+                        >
+                            <Text1 regular color={vars.colors.textError}>
+                                <IconWarningRegular color="currentColor" className={styles.errorIcon} />
+                            </Text1>
+                            <Text1 regular color={vars.colors.textError}>
+                                {errorMessage}
+                            </Text1>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default Message;

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '17.8.0' as string;
+export const PACKAGE_VERSION = '17.10.0' as string;

package/src/pagination.css.ts

@@ -44,24 +44,6 @@ export const pageList = style([
     },
 ]);
 
-export const pageListDesktop = style({
-    display: 'none',
-
-    '@media': {
-        [mq.desktopOrBigger]: {
-            display: 'flex',
-        },
-    },
-});
-
-export const pageListMobile = style({
-    '@media': {
-        [mq.desktopOrBigger]: {
-            display: 'none',
-        },
-    },
-});
-
 export const pageListItem = style([
     sprinkles({
         display: 'flex',
@@ -81,6 +63,21 @@ export const pageListItem = style([
     },
 ]);
 
+export const itemVisibility = styleVariants({
+    any: {},
+    desktop: {
+        display: 'none',
+        '@media': {
+            [mq.desktopOrBigger]: {display: 'flex'},
+        },
+    },
+    mobile: {
+        '@media': {
+            [mq.desktopOrBigger]: {display: 'none'},
+        },
+    },
+});
+
 const interactiveArea = style([
     {
         position: 'relative',