@telefonica/mistica 16.58.0 → 16.59.0-beta.1

package/src/sheet-common.tsx

@@ -0,0 +1,402 @@
+'use client';
+/*
+ * IMPORTANT: Do NOT import anything from here into `sheet-root.tsx`
+
+ * The idea is to keep the SheetRoot component as small as possible (to keep the initial load time low)
+ * and lazy load the implementations when needed.
+ *
+ * This file contains code that is shared between different sheet implementations.
+ */
+import classnames from 'classnames';
+import * as React from 'react';
+import * as styles from './sheet-common.css';
+import FocusTrap from './focus-trap';
+import {useDisableBodyScroll, useIsInViewport, useIsWithinIFrame, useScreenSize, useTheme} from './hooks';
+import {useSetModalStateEffect} from './modal-context-provider';
+import {Portal} from './portal';
+import {Text2, Text3, Text5} from './text';
+import {vars as skinVars} from './skins/skin-contract.css';
+import Stack from './stack';
+import Box from './box';
+import Divider from './divider';
+import {getPrefixedDataAttributes, getScrollableParentElement} from './utils/dom';
+import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
+import {IconButton} from './icon-button';
+import ButtonLayout from './button-layout';
+import {safeAreaInsetBottom} from './utils/css';
+import {MOBILE_SIDE_MARGIN, TABLET_SIDE_MARGIN} from './responsive-layout.css';
+import * as tokens from './text-tokens';
+
+import type {DataAttributes, RendersNullableElement} from './utils/types';
+import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
+
+const transitionDuration = process.env.NODE_ENV === 'test' ? 0 : styles.transitionDuration;
+
+const getClientY = (ev: TouchEvent | MouseEvent | React.TouchEvent | React.MouseEvent) => {
+    if ('touches' in ev) {
+        return ev.touches[0].clientY;
+    }
+    return ev.clientY;
+};
+
+const useDraggableSheetProps = ({closeModal}: {closeModal: () => void}) => {
+    const [dragDistance, setDragDistance] = React.useState(0);
+    const isDraggingRef = React.useRef(false);
+    const initialMoveEventsCount = React.useRef(0);
+    const dragInitTimeRef = React.useRef(0);
+    const initialYRef = React.useRef(0);
+    const currentYRef = React.useRef(0);
+
+    const {isDesktopOrBigger} = useScreenSize();
+
+    const handleTouchStart = React.useCallback((ev: React.TouchEvent | React.MouseEvent) => {
+        isDraggingRef.current = true;
+        initialMoveEventsCount.current = 0;
+        dragInitTimeRef.current = Date.now();
+        initialYRef.current = getClientY(ev);
+    }, []);
+
+    const handleScroll = React.useCallback(() => {
+        isDraggingRef.current = false;
+        setDragDistance(0);
+    }, []);
+
+    React.useEffect(() => {
+        if (isDesktopOrBigger) {
+            return;
+        }
+
+        const handleTouchMove = (ev: TouchEvent | MouseEvent) => {
+            if (!isDraggingRef.current) {
+                return;
+            }
+
+            // we discard the first move events to allow scroll events to have priority. When the first
+            // scroll event is fired, dragging is disabled. If no scroll event is fired, we continue
+            // handling the dragging. After doing some tests in Android/iOS, 3 seems like a good number
+            if (initialMoveEventsCount.current < 3) {
+                initialMoveEventsCount.current++;
+                return;
+            }
+
+            currentYRef.current = getClientY(ev);
+
+            setDragDistance(currentYRef.current - initialYRef.current);
+        };
+
+        const handleTouchEnd = () => {
+            if (!isDraggingRef.current) {
+                return;
+            }
+            const dragTime = Date.now() - dragInitTimeRef.current;
+            const dragDistance = currentYRef.current - initialYRef.current;
+            const dragSpeed = dragDistance / dragTime;
+
+            isDraggingRef.current = false;
+            setDragDistance(0);
+            if (dragDistance > 50 && (currentYRef.current > window.innerHeight * 0.75 || dragSpeed > 0.5)) {
+                closeModal();
+            }
+        };
+
+        document.addEventListener('touchmove', handleTouchMove);
+        document.addEventListener('touchend', handleTouchEnd);
+        document.addEventListener('mousemove', handleTouchMove);
+        document.addEventListener('mouseup', handleTouchEnd);
+
+        return () => {
+            document.removeEventListener('touchmove', handleTouchMove);
+            document.removeEventListener('touchend', handleTouchEnd);
+            document.removeEventListener('mousemove', handleTouchMove);
+            document.removeEventListener('mouseup', handleTouchEnd);
+        };
+    }, [closeModal, isDesktopOrBigger]);
+
+    if (isDesktopOrBigger) {
+        return {};
+    }
+
+    return {
+        onTouchStart: handleTouchStart,
+        onMouseDown: handleTouchStart,
+        style: dragDistance
+            ? {
+                  transform: `translateY(${dragDistance}px)`,
+                  transition: 'none',
+              }
+            : undefined,
+        onScroll: handleScroll,
+        overlayStyle: dragDistance
+            ? {
+                  // decrease opacity when dragging down the sheet
+                  opacity: 0.25 + 1 - dragDistance / (window.innerHeight - initialYRef.current),
+                  transition: 'none',
+              }
+            : undefined,
+    };
+};
+
+type ModalState = 'closed' | 'opening' | 'open' | 'closing' | 'closed';
+type ModalAction = 'close' | 'open' | 'transitionEnd';
+
+const transitions: Record<ModalState, Partial<Record<ModalAction, ModalState>>> = {
+    closed: {
+        open: 'opening',
+    },
+    opening: {
+        close: 'closed',
+        transitionEnd: 'open',
+    },
+    open: {
+        close: 'closing',
+    },
+    closing: {
+        transitionEnd: 'closed',
+    },
+};
+
+const modalReducer = (state: ModalState, action: ModalAction): ModalState =>
+    transitions[state][action] || state;
+
+type SheetProps = {
+    onClose?: () => void;
+    dataAttributes?: DataAttributes;
+    children:
+        | React.ReactNode
+        | ((renderParams: {closeModal: () => void; modalTitleId: string}) => React.ReactNode);
+};
+
+const Sheet = React.forwardRef<HTMLDivElement, SheetProps>(({onClose, children, dataAttributes}, ref) => {
+    const {texts, t} = useTheme();
+    const {isTabletOrSmaller} = useScreenSize();
+    const [modalState, dispatch] = React.useReducer(modalReducer, 'closed');
+    const initRef = React.useRef(false);
+    const modalTitleId = React.useId();
+    const isInIframe = useIsWithinIFrame();
+
+    const handleTransitionEnd = React.useCallback((ev: React.AnimationEvent | React.TransitionEvent) => {
+        // Don't trigger transitionEnd if the event is not triggered by the sheet element.
+        if (ev.target === ev.currentTarget) {
+            dispatch('transitionEnd');
+        }
+    }, []);
+
+    const closeModal = () => {
+        if (modalState === 'open') {
+            dispatch('close');
+        }
+    };
+
+    // transitionEnd/animationEnd dom events may not trigger in some cases, so we use a timeout as fallback
+    React.useEffect(() => {
+        if (modalState === 'opening' || modalState === 'closing') {
+            const tid = setTimeout(() => {
+                dispatch('transitionEnd');
+            }, transitionDuration);
+
+            return () => clearTimeout(tid);
+        }
+    }, [modalState]);
+
+    React.useEffect(() => {
+        if (modalState === 'closed') {
+            if (initRef.current) {
+                onClose?.();
+            } else {
+                dispatch('open');
+            }
+        } else {
+            initRef.current = true;
+        }
+    }, [modalState, onClose]);
+
+    const {onScroll, overlayStyle, ...dragableSheetProps} = useDraggableSheetProps({closeModal});
+
+    useSetModalStateEffect();
+    useDisableBodyScroll(modalState !== 'closed');
+
+    if (modalState === 'closed') {
+        return null;
+    }
+
+    return (
+        <Portal>
+            <FocusTrap disabled={isInIframe}>
+                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+                <div
+                    className={classnames(styles.overlay, {
+                        [styles.closingOverlay]: modalState === 'closing',
+                    })}
+                    style={overlayStyle}
+                    onClick={closeModal}
+                />
+                <div
+                    className={classnames(styles.SheetContainer, {
+                        [styles.closingSheet]: modalState === 'closing',
+                    })}
+                    onTransitionEnd={handleTransitionEnd}
+                    onAnimationEnd={handleTransitionEnd}
+                    {...dragableSheetProps}
+                    {...getPrefixedDataAttributes(dataAttributes, 'Sheet')}
+                    ref={ref}
+                >
+                    <div className={styles.Sheet}>
+                        <div className={styles.SheetContent}>
+                            {/**
+                             * Space rendered on the top part of the sheet on top of
+                             * the content in order to be able to drag the sheet
+                             */}
+                            <div className={styles.sheetTopDraggingArea} />
+
+                            <section
+                                role="dialog"
+                                aria-modal="true"
+                                aria-labelledby={modalTitleId}
+                                onScroll={onScroll}
+                                className={styles.children}
+                                style={{
+                                    paddingBottom: safeAreaInsetBottom,
+                                }}
+                            >
+                                {typeof children === 'function'
+                                    ? children({closeModal, modalTitleId})
+                                    : children}
+                                <div className={styles.handleContainer}>
+                                    <div className={styles.handleBar} />
+                                </div>
+                                <div className={styles.dismissButton}>
+                                    <IconButton
+                                        small={isTabletOrSmaller}
+                                        onPress={closeModal}
+                                        aria-label={texts.modalClose || t(tokens.modalClose)}
+                                        Icon={IconCloseRegular}
+                                    />
+                                </div>
+                            </section>
+                        </div>
+                    </div>
+                </div>
+            </FocusTrap>
+        </Portal>
+    );
+});
+
+const paddingX = {
+    mobile: MOBILE_SIDE_MARGIN,
+    tablet: TABLET_SIDE_MARGIN,
+    desktop: 40, // to keep consistency with the rest of the dialogs components
+} as const;
+
+type SheetBodyProps = {
+    title?: string;
+    subtitle?: string;
+    description?: string | ReadonlyArray<string>;
+    button?: RendersNullableElement<typeof ButtonPrimary>;
+    secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
+    link?: RendersNullableElement<typeof ButtonLink>;
+    modalTitleId: string;
+    children?: React.ReactNode;
+};
+
+export const SheetBody = ({
+    title,
+    subtitle,
+    description,
+    modalTitleId,
+    button,
+    secondaryButton,
+    link,
+    children,
+}: SheetBodyProps): JSX.Element => {
+    const topScrollSignalRef = React.useRef<HTMLDivElement>(null);
+    const bottomScrollSignalRef = React.useRef<HTMLDivElement>(null);
+    const scrollableParentRef = React.useRef<HTMLElement | null>(null);
+
+    React.useEffect(() => {
+        if (bottomScrollSignalRef.current) {
+            scrollableParentRef.current = getScrollableParentElement(bottomScrollSignalRef.current);
+        }
+    }, []);
+
+    const showTitleDivider = !useIsInViewport(topScrollSignalRef, true, {
+        root: scrollableParentRef.current,
+    });
+    const showButtonsDivider = !useIsInViewport(bottomScrollSignalRef, true, {
+        rootMargin: '1px', // bottomScrollSignal div has 0px height so we need a 1px margin to trigger the intersection observer
+        root: scrollableParentRef.current,
+    });
+
+    const hasButtons = !!button || !!secondaryButton || !!link;
+    return (
+        <>
+            <div ref={topScrollSignalRef} />
+            <div className={styles.stickyTitle}>
+                {title ? (
+                    <Box paddingBottom={8} paddingTop={{mobile: 0, desktop: 40}} paddingX={paddingX}>
+                        <Text5 as="h2" id={modalTitleId} truncate>
+                            {title}
+                        </Text5>
+                    </Box>
+                ) : (
+                    <Box paddingTop={{mobile: 0, desktop: 40}} />
+                )}
+                {showTitleDivider && <Divider />}
+            </div>
+            <div className={styles.bodyContent}>
+                <Box paddingBottom={hasButtons ? 0 : {desktop: 40, mobile: 0}} paddingX={paddingX}>
+                    <Stack space={8}>
+                        {subtitle || description ? (
+                            <Stack space={{mobile: 8, desktop: 16}}>
+                                {subtitle && (
+                                    <Text3 as="p" regular>
+                                        {subtitle}
+                                    </Text3>
+                                )}
+                                {description &&
+                                    (Array.isArray(description) ? (
+                                        <Text2 as="div" regular color={skinVars.colors.textSecondary}>
+                                            {description.map((text, index) => (
+                                                <p
+                                                    key={index}
+                                                    style={{
+                                                        margin: 0,
+                                                        marginBottom:
+                                                            index < description.length - 1
+                                                                ? '1em'
+                                                                : undefined,
+                                                    }}
+                                                >
+                                                    {text}
+                                                </p>
+                                            ))}
+                                        </Text2>
+                                    ) : (
+                                        <Text2 as="p" regular color={skinVars.colors.textSecondary}>
+                                            {description}
+                                        </Text2>
+                                    ))}
+                            </Stack>
+                        ) : null}
+                        {children}
+                    </Stack>
+                </Box>
+            </div>
+            {hasButtons && (
+                <div className={styles.stickyButtons}>
+                    {showButtonsDivider && <Divider />}
+                    <Box paddingY={{mobile: 16, desktop: 40}} paddingX={paddingX}>
+                        <ButtonLayout
+                            align="full-width"
+                            link={link}
+                            primaryButton={button}
+                            secondaryButton={secondaryButton}
+                        />
+                    </Box>
+                </div>
+            )}
+            <div ref={bottomScrollSignalRef} />
+        </>
+    );
+};
+
+export default Sheet;

package/src/sheet-info.css.ts

@@ -0,0 +1,19 @@
+import {sprinkles} from './sprinkles.css';
+
+export const infoItemIcon = sprinkles({
+    display: 'flex',
+    alignItems: 'center',
+    height: 24,
+});
+
+export const infoItemIconContainer = sprinkles({
+    height: '100%',
+    display: 'flex',
+});
+
+export const itemContainer = sprinkles({
+    display: 'flex',
+    alignItems: 'center',
+    minHeight: 72,
+    paddingY: 16,
+});

package/src/sheet-info.tsx

@@ -0,0 +1,127 @@
+'use client';
+import * as React from 'react';
+import Inline from './inline';
+import Circle from './circle';
+import Sheet, {SheetBody} from './sheet-common';
+import {useTheme} from './hooks';
+import Box from './box';
+import Stack from './stack';
+import {Text3, Text2} from './text';
+import {vars as skinVars} from './skins/skin-contract.css';
+import * as styles from './sheet-info.css';
+import Image from './image';
+import {ButtonPrimary} from './button';
+import Divider from './divider';
+
+import type {ExclusifyUnion} from './utils/utility-types';
+import type {DataAttributes, IconProps} from './utils/types';
+
+type InfoSheetProps = {
+    title?: string;
+    subtitle?: string;
+    description?: string | ReadonlyArray<string>;
+    items: ReadonlyArray<{
+        id?: string;
+        title: string;
+        description?: string;
+        icon: ExclusifyUnion<
+            | {
+                  type: 'regular' | 'small';
+                  /** @deprecated use url instead */
+                  Icon: React.ComponentType<IconProps>;
+              }
+            | {
+                  type: 'regular' | 'small';
+                  url: string;
+                  urlDark?: string;
+              }
+            | {type: 'bullet'}
+        >;
+    }>;
+    onClose?: () => void;
+    dataAttributes?: DataAttributes;
+    button?: {
+        text: string;
+    };
+};
+
+const InfoSheet = React.forwardRef<HTMLDivElement, InfoSheetProps>(
+    ({title, subtitle, description, items, onClose, button, dataAttributes}, ref) => {
+        const {isDarkMode} = useTheme();
+        return (
+            <Sheet
+                onClose={onClose}
+                ref={ref}
+                dataAttributes={{'component-name': 'InfoSheet', ...dataAttributes}}
+            >
+                {({closeModal, modalTitleId}) => (
+                    <SheetBody
+                        title={title}
+                        subtitle={subtitle}
+                        description={description}
+                        modalTitleId={modalTitleId}
+                        button={
+                            button ? (
+                                <ButtonPrimary onPress={closeModal}>{button.text}</ButtonPrimary>
+                            ) : undefined
+                        }
+                    >
+                        <Box paddingBottom={16} role="list">
+                            {items.map((item, idx) => (
+                                <React.Fragment key={item.id || idx}>
+                                    <div className={styles.itemContainer} role="listitem">
+                                        <Inline space={8}>
+                                            <div
+                                                className={styles.infoItemIconContainer}
+                                                style={{
+                                                    alignItems:
+                                                        item.icon.type !== 'bullet' && !item.description
+                                                            ? 'center'
+                                                            : undefined,
+                                                }}
+                                            >
+                                                <div className={styles.infoItemIcon}>
+                                                    {item.icon.type === 'bullet' ? (
+                                                        <Circle
+                                                            size={8}
+                                                            backgroundColor={skinVars.colors.textPrimary}
+                                                        />
+                                                    ) : item.icon.Icon ? (
+                                                        <item.icon.Icon
+                                                            size={item.icon.type === 'small' ? 16 : 24}
+                                                        />
+                                                    ) : (
+                                                        <Image
+                                                            src={
+                                                                isDarkMode && item.icon.urlDark
+                                                                    ? item.icon.urlDark
+                                                                    : item.icon.url
+                                                            }
+                                                            width={item.icon.type === 'small' ? 16 : 24}
+                                                            height={item.icon.type === 'small' ? 16 : 24}
+                                                        />
+                                                    )}
+                                                </div>
+                                            </div>
+                                            <Stack space={2}>
+                                                <Text3 regular>{item.title}</Text3>
+                                                {item.description && (
+                                                    <Text2 regular color={skinVars.colors.textSecondary}>
+                                                        {item.description}
+                                                    </Text2>
+                                                )}
+                                            </Stack>
+                                        </Inline>
+                                    </div>
+                                    {idx < items.length - 1 && <Divider />}
+                                </React.Fragment>
+                            ))}
+                        </Box>
+                    </SheetBody>
+                )}
+            </Sheet>
+        );
+    }
+);
+
+export default InfoSheet;