@telefonica/mistica 16.58.0 → 16.59.0-beta.1

package/src/file-upload.tsx

@@ -0,0 +1,612 @@
+'use client';
+import * as React from 'react';
+import classnames from 'classnames';
+import Stack from './stack';
+import {Text1, Text2, Text3} from './text';
+import Inline from './inline';
+import IconWarningRegular from './generated/mistica-icons/icon-warning-regular';
+import {vars as skinVars} from './skins/skin-contract.css';
+import Box from './box';
+import {useInnerText, useTheme} from './hooks';
+import * as textTokens from './text-tokens';
+import Image from './image';
+import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
+import IconFilePdfRegular from './generated/mistica-icons/icon-file-pdf-regular';
+import IconInvoicePlanFileRegular from './generated/mistica-icons/icon-invoice-plan-file-regular';
+import IconFilePptRegular from './generated/mistica-icons/icon-file-ppt-regular';
+import IconFileZipRegular from './generated/mistica-icons/icon-file-zip-regular';
+import IconFileComressedRegular from './generated/mistica-icons/icon-file-compressed-regular';
+import IconFileCssRegular from './generated/mistica-icons/icon-file-css-regular';
+import IconFileHtmlRegular from './generated/mistica-icons/icon-file-html-regular';
+import IconFileEnexRegular from './generated/mistica-icons/icon-file-enex-regular';
+import IconFilePsdRegular from './generated/mistica-icons/icon-file-psd-regular';
+import IconFileIllustratorRegular from './generated/mistica-icons/icon-file-illustrator-regular';
+import IconFileMp4Regular from './generated/mistica-icons/icon-file-mp-4-regular';
+import IconFileVideoRegular from './generated/mistica-icons/icon-video-regular';
+import IconFileAviRegular from './generated/mistica-icons/icon-file-avi-regular';
+import IconFileMp3Regular from './generated/mistica-icons/icon-file-mp-3-regular';
+import IconFileMusicRegular from './generated/mistica-icons/icon-file-music-regular';
+import IconClipRegular from './generated/mistica-icons/icon-clip-regular';
+import * as styles from './file-upload.css';
+import {useThemeVariant} from './theme-variant-context';
+import {getPrefixedDataAttributes} from './utils/dom';
+import {BoxedRow, BoxedRowList} from './list';
+
+import type {DataAttributes, IconProps} from './utils/types';
+import type {ExclusifyUnion} from './utils/utility-types';
+
+const FileIcon = ({file}: {file: File}) => {
+    if (file.type.startsWith('image/')) {
+        return <Image src={URL.createObjectURL(file)} width={40} height={40} />;
+    }
+
+    const fileExtensionToIconComponent: {[key: string]: (props: IconProps) => JSX.Element} = {
+        pdf: IconFilePdfRegular,
+        doc: IconInvoicePlanFileRegular,
+        docx: IconInvoicePlanFileRegular,
+        txt: IconInvoicePlanFileRegular,
+        ppt: IconFilePptRegular,
+        pptx: IconFilePptRegular,
+        zip: IconFileZipRegular,
+        rar: IconFileComressedRegular,
+        css: IconFileCssRegular,
+        html: IconFileHtmlRegular,
+        enex: IconFileEnexRegular,
+        pds: IconFilePsdRegular,
+        ai: IconFileIllustratorRegular,
+        mp4: IconFileMp4Regular,
+        mov: IconFileVideoRegular,
+        avi: IconFileAviRegular,
+        mp3: IconFileMp3Regular,
+        wav: IconFileMusicRegular,
+    };
+
+    const extension = file.name.split('.').pop()?.toLowerCase() || '';
+    const IconComponent = fileExtensionToIconComponent[extension] || IconClipRegular;
+
+    return <IconComponent />;
+};
+
+const formatSize = (sizeInBytes: number, locale?: string): string => {
+    if (sizeInBytes < 1024) {
+        return `${sizeInBytes} B`;
+    } else if (sizeInBytes < 1024 * 1024) {
+        return `${Math.round(sizeInBytes / 1024).toLocaleString(locale)} KB`;
+    } else {
+        return `${(sizeInBytes / (1024 * 1024)).toLocaleString(locale, {minimumFractionDigits: 0, maximumFractionDigits: 2})} MB`;
+    }
+};
+
+const updateInputFiles = (input: HTMLInputElement | null, files: FileList | null) => {
+    if (!input) {
+        return;
+    }
+    if (files && files.length > 0) {
+        input.files = files;
+    } else {
+        const dataTransfer = new DataTransfer();
+        input.value = '';
+        input.files = dataTransfer.files;
+    }
+};
+
+type UseFileUploadProps = {
+    id?: string;
+    name?: string;
+    accept?: string;
+    capture?: boolean | 'user' | 'environment';
+    multiple?: boolean;
+    disabled?: boolean;
+    errorText?: string;
+    /** When enabled, new files will be appended to the existing files instead of replacing them */
+    allowAppend?: boolean;
+    files?: FileList | null;
+    defaultFiles?: FileList | null;
+    onFilesChange?: (files: FileList | null) => void;
+};
+
+type UseFileUploadReturn = {
+    id: string;
+    files: FileList | null;
+    setFiles: (files: FileList | null) => void;
+    inputProps: {
+        ref: React.RefObject<HTMLInputElement | null>;
+        type: 'file';
+        id: string;
+        name?: string;
+        accept?: string;
+        capture?: boolean | 'user' | 'environment';
+        multiple?: boolean;
+        disabled?: boolean;
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        'aria-describedby'?: string;
+        'aria-invalid'?: boolean;
+    };
+    dropZoneProps: {
+        onDragEnter: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDrop: (event: React.DragEvent<HTMLDivElement>) => void;
+        onClick: (event: React.MouseEvent<HTMLElement>) => void;
+    };
+    isDragActive: boolean;
+    openFileDialog: () => void;
+    removeFile: (file: File) => void;
+    errorTextId: string;
+};
+
+const useFileUpload = ({
+    id: idProp,
+    name,
+    accept,
+    capture,
+    multiple,
+    disabled = false,
+    errorText,
+    allowAppend = false,
+    files: filesProp,
+    defaultFiles = null,
+    onFilesChange,
+}: UseFileUploadProps): UseFileUploadReturn => {
+    const generatedId = React.useId();
+    const id = idProp || generatedId;
+    const errorTextId = `${id}-error-text`;
+    const [filesState, setFilesState] = React.useState<FileList | null>(defaultFiles);
+    const [isDragActive, setIsDragActive] = React.useState(false);
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    // we need a counter because browsers trigger dragenter and dragleave multiple times when dragging over
+    // the drop zone, especially when there are child elements. The counter helps us determine when the drag
+    // is actually leaving the drop zone (counter goes to 0) vs just moving between child elements (counter > 0).
+    // Without this, the drop zone would flicker between active and inactive states as you move the mouse over it.
+    const dragCounterRef = React.useRef(0);
+    const isControlled = typeof filesProp !== 'undefined';
+    const files = isControlled ? filesProp : filesState;
+
+    const setFiles = (nextFiles: FileList | null) => {
+        if (!isControlled) {
+            setFilesState(nextFiles);
+        }
+        onFilesChange?.(nextFiles);
+        updateInputFiles(inputRef.current, nextFiles);
+    };
+
+    const handleFilesChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (disabled) {
+            return;
+        }
+        const newFiles = event.target.files;
+        if (!newFiles) {
+            return;
+        }
+
+        if (allowAppend && files && files.length > 0) {
+            const dataTransfer = new DataTransfer();
+            for (let i = 0; i < files.length; i++) {
+                const existingFile = files.item(i);
+                if (existingFile) {
+                    dataTransfer.items.add(existingFile);
+                }
+            }
+            for (let i = 0; i < newFiles.length; i++) {
+                const newFile = newFiles.item(i);
+                if (newFile) {
+                    dataTransfer.items.add(newFile);
+                }
+            }
+            setFiles(dataTransfer.files);
+        } else {
+            setFiles(newFiles);
+        }
+    };
+
+    const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
+        if (disabled) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        dragCounterRef.current++;
+        if (event.dataTransfer.items && event.dataTransfer.items.length > 0) {
+            setIsDragActive(true);
+        }
+    };
+
+    const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
+        if (disabled) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        dragCounterRef.current--;
+        if (dragCounterRef.current === 0) {
+            setIsDragActive(false);
+        }
+    };
+
+    const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+        if (disabled) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    };
+
+    const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+        if (disabled) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragActive(false);
+        dragCounterRef.current = 0;
+
+        const droppedFiles = event.dataTransfer.files;
+        if (droppedFiles && droppedFiles.length > 0) {
+            const dataTransfer = new DataTransfer();
+
+            if (allowAppend && files && files.length > 0) {
+                for (let i = 0; i < files.length; i++) {
+                    const existingFile = files.item(i);
+                    if (existingFile) {
+                        dataTransfer.items.add(existingFile);
+                    }
+                }
+                for (let i = 0; i < droppedFiles.length; i++) {
+                    const droppedFile = droppedFiles.item(i);
+                    if (droppedFile) {
+                        dataTransfer.items.add(droppedFile);
+                    }
+                }
+                setFiles(dataTransfer.files);
+            } else if (!multiple && droppedFiles.length > 1) {
+                dataTransfer.items.add(droppedFiles[0]);
+                setFiles(dataTransfer.files);
+            } else {
+                setFiles(droppedFiles);
+            }
+        }
+    };
+
+    const removeFile = (file: File) => {
+        if (disabled) {
+            return;
+        }
+        const dataTransfer = new DataTransfer();
+        if (files) {
+            for (let i = 0; i < files.length; i++) {
+                const existingFile = files.item(i);
+                if (existingFile && existingFile !== file) {
+                    dataTransfer.items.add(existingFile);
+                }
+            }
+            setFiles(dataTransfer.files);
+        }
+    };
+
+    const openFileDialog = () => {
+        if (disabled) {
+            return;
+        }
+        inputRef.current?.click();
+    };
+
+    const handleDropZoneClick = (event: React.MouseEvent<HTMLElement>) => {
+        if (disabled) {
+            return;
+        }
+        if (event.defaultPrevented) {
+            return;
+        }
+
+        const target = event.target instanceof HTMLElement ? event.target : null;
+        // Ignore clicks on interactive descendants to avoid reopening the dialog.
+        if (target) {
+            const interactiveAncestor = target.closest('button, a, input, select, textarea, [role="button"]');
+            if (interactiveAncestor && interactiveAncestor !== event.currentTarget) {
+                return;
+            }
+        }
+
+        openFileDialog();
+    };
+
+    React.useEffect(() => {
+        updateInputFiles(inputRef.current, files ?? null);
+    }, [files]);
+
+    return {
+        id,
+        files,
+        setFiles,
+        inputProps: {
+            ref: inputRef,
+            type: 'file' as const,
+            id,
+            name,
+            accept,
+            capture,
+            multiple,
+            disabled,
+            onChange: handleFilesChange,
+            'aria-describedby': errorText ? errorTextId : undefined,
+            'aria-invalid': !!errorText,
+        },
+        dropZoneProps: {
+            onDragEnter: handleDragEnter,
+            onDragLeave: handleDragLeave,
+            onDragOver: handleDragOver,
+            onDrop: handleDrop,
+            onClick: handleDropZoneClick,
+        },
+        isDragActive,
+        openFileDialog,
+        removeFile,
+        errorTextId,
+    };
+};
+
+type FileItemProps = {
+    file: File;
+    onRemove: (file: File) => void;
+    removeLabel?: string;
+};
+
+export const FileItem = ({file, onRemove, removeLabel}: FileItemProps): JSX.Element => {
+    const {i18n, t, texts} = useTheme();
+
+    return (
+        <BoxedRow
+            title={file.name}
+            asset={<FileIcon file={file} />}
+            detail={formatSize(file.size, i18n.locale)}
+            iconButton={{
+                type: 'neutral',
+                Icon: IconCloseRegular,
+                small: true,
+                onPress: () => onRemove(file),
+                'aria-label':
+                    removeLabel ??
+                    texts.fileUploadRemoveFile ??
+                    t(textTokens.fileUploadRemoveFile, file.name),
+            }}
+        />
+    );
+};
+
+type Props = {
+    id?: string;
+    name?: string;
+    accept?: string;
+    capture?: boolean | 'user' | 'environment';
+    multiple?: boolean;
+    disabled?: boolean;
+    errorText?: string;
+    /** When enabled, new files will be appended to the existing files instead of replacing them */
+    allowAppend?: boolean;
+    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
+    dataAttributes?: DataAttributes;
+} & ExclusifyUnion<
+    | {
+          render: (props: {
+              id: string;
+              files: FileList | null;
+              setFiles: (files: FileList | null) => void;
+              dropZoneProps: {
+                  onDragEnter: (event: React.DragEvent<HTMLDivElement>) => void;
+                  onDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
+                  onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
+                  onDrop: (event: React.DragEvent<HTMLDivElement>) => void;
+                  onClick: (event: React.MouseEvent<HTMLElement>) => void;
+              };
+              isDragActive: boolean;
+              openFileDialog: () => void;
+              removeFile: (file: File) => void;
+              errorTextId: string;
+              disabled: boolean;
+          }) => React.ReactNode;
+      }
+    | {
+          asset?: React.ReactNode;
+          title?: string;
+          description?: string;
+          slot?: React.ReactNode;
+          renderButton: (props: {
+              onPress: () => void;
+              small?: boolean;
+              disabled?: boolean;
+              tabIndex?: number;
+              'aria-hidden'?: boolean | 'true' | 'false';
+          }) => React.ReactNode;
+          renderFiles?: (props: {
+              files: FileList | null;
+              removeFile: (file: File) => void;
+          }) => React.ReactNode;
+          withDropZone?: boolean;
+      }
+>;
+
+const FileUpload = (props: Props): JSX.Element => {
+    const {
+        id: idProp,
+        name,
+        accept,
+        capture,
+        multiple,
+        disabled = false,
+        errorText,
+        allowAppend = false,
+        dataAttributes,
+    } = props;
+    const {texts, t} = useTheme();
+    const outsideVariant = useThemeVariant();
+    const {ref: buttonRef, text: buttonText} = useInnerText();
+    const {
+        id,
+        files,
+        setFiles,
+        inputProps,
+        dropZoneProps,
+        isDragActive,
+        openFileDialog,
+        removeFile,
+        errorTextId,
+    } = useFileUpload({
+        id: idProp,
+        name,
+        accept,
+        capture,
+        multiple,
+        disabled,
+        errorText,
+        allowAppend,
+    });
+
+    if (props.render) {
+        return (
+            <div
+                {...getPrefixedDataAttributes({
+                    'component-name': 'FileUpload',
+                    testid: 'FileUpload',
+                    ...dataAttributes,
+                })}
+            >
+                {props.render({
+                    id,
+                    files,
+                    setFiles,
+                    dropZoneProps,
+                    isDragActive,
+                    openFileDialog,
+                    removeFile,
+                    errorTextId,
+                    disabled,
+                })}
+                <input style={{display: 'none'}} {...inputProps} />
+            </div>
+        );
+    }
+
+    const {asset, title, description, slot, renderButton, renderFiles, withDropZone = false} = props;
+
+    const dropZoneHandlers = withDropZone && !disabled ? dropZoneProps : {};
+    const descriptionId = description ? `${id}-dropzone-description` : undefined;
+    const slotId = slot ? `${id}-dropzone-slot` : undefined;
+
+    const contentClassName = classnames({
+        [styles.disabled]: disabled,
+        [styles.dropZoneContainerBase]: withDropZone,
+        [styles.dropZoneVariant[outsideVariant]]: withDropZone,
+        [styles.dropZoneActive]: withDropZone && isDragActive,
+    });
+
+    const assetClassName = withDropZone && isDragActive ? styles.assetScaleActive : '';
+
+    return (
+        <Stack
+            space={16}
+            dataAttributes={{'component-name': 'FileUpload', testid: 'FileUpload', ...dataAttributes}}
+        >
+            <Stack space={4}>
+                <div {...dropZoneHandlers} className={contentClassName}>
+                    {withDropZone && !disabled && (
+                        <button
+                            type="button"
+                            className={styles.dropZoneButton}
+                            aria-label={[title, buttonText].filter(Boolean).join('. ')}
+                            aria-describedby={[descriptionId, slotId].filter(Boolean).join(' ')}
+                            onClick={openFileDialog}
+                        />
+                    )}
+                    <Stack space={8}>
+                        {asset && (
+                            <div
+                                className={assetClassName}
+                                style={{
+                                    color: {
+                                        default: skinVars.colors.brand,
+                                        alternative: skinVars.colors.brand,
+                                        brand: skinVars.colors.neutralHighBrand,
+                                        negative: skinVars.colors.negative,
+                                        media: skinVars.colors.negative,
+                                    }[outsideVariant],
+                                }}
+                            >
+                                {asset}
+                            </div>
+                        )}
+                        <Stack space={4}>
+                            {title && (
+                                <Text3 regular as="div" dataAttributes={{testid: 'title'}}>
+                                    <label htmlFor={id}>{title}</label>
+                                </Text3>
+                            )}
+                            {description && (
+                                <Text2
+                                    regular
+                                    as="div"
+                                    color={skinVars.colors.textSecondary}
+                                    dataAttributes={{testid: 'description'}}
+                                    id={descriptionId}
+                                >
+                                    {description}
+                                </Text2>
+                            )}
+                        </Stack>
+                    </Stack>
+                    {slot && <div id={slotId}>{slot}</div>}
+                    <Box paddingTop={16}>
+                        {withDropZone ? (
+                            <div className={styles.centeredButton} ref={buttonRef} aria-hidden="true">
+                                {renderButton({
+                                    onPress: openFileDialog,
+                                    small: true,
+                                    disabled,
+                                    tabIndex: -1,
+                                    'aria-hidden': true,
+                                })}
+                            </div>
+                        ) : (
+                            renderButton({
+                                onPress: openFileDialog,
+                                small: true,
+                                disabled,
+                            })
+                        )}
+                    </Box>
+                    <input style={{display: 'none'}} {...inputProps} />
+                </div>
+                {errorText && (
+                    <div className={disabled ? styles.disabled : ''}>
+                        <Text1
+                            regular
+                            color={skinVars.colors.textError}
+                            as="div"
+                            id={errorTextId}
+                            aria-live="assertive"
+                            dataAttributes={{testid: 'error-text'}}
+                        >
+                            <Inline space={4}>
+                                <IconWarningRegular size={16} color="currentColor" />
+                                {errorText}
+                            </Inline>
+                        </Text1>
+                    </div>
+                )}
+            </Stack>
+            {renderFiles
+                ? renderFiles({files, removeFile})
+                : files &&
+                  files.length > 0 && (
+                      <BoxedRowList
+                          aria-label={texts.fileUploadListLabel ?? t(textTokens.fileUploadListLabel)}
+                      >
+                          {Array.from(files).map((file, index) => (
+                              <FileItem key={index} file={file} onRemove={removeFile} />
+                          ))}
+                      </BoxedRowList>
+                  )}
+        </Stack>
+    );
+};
+
+export default FileUpload;

package/src/fixed-footer-layout.css.ts

@@ -0,0 +1,96 @@
+import {createVar, style} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+import {vars as skinVars} from './skins/skin-contract.css';
+import * as mq from './media-queries.css';
+
+const footerHeight = createVar();
+const backgroundColor = createVar();
+
+export const vars = {footerHeight, backgroundColor};
+
+export const footer = style([
+    sprinkles({
+        width: '100%',
+    }),
+    {
+        transition: 'box-shadow 0.2s linear',
+    },
+]);
+
+export const fixedFooter = style({
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            position: 'fixed',
+            left: 0,
+            bottom: 0,
+            boxShadow: '0 -2px 8px 0 rgba(0, 0, 0, 0)', // without this chrome mobile shows strange artifacts in the shadow animation
+        },
+    },
+});
+
+export const elevated = style({
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            background: skinVars.colors.backgroundContainer,
+            boxShadow: '0 -2px 8px 0 rgba(0, 0, 0, 0.10)',
+        },
+    },
+});
+
+export const withoutFooter = sprinkles({display: 'none'});
+
+export const container = style({
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            isolation: 'isolate',
+            paddingBottom: footerHeight,
+        },
+    },
+});
+
+export const portal = style([
+    sprinkles({
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        position: 'fixed',
+    }),
+    {
+        zIndex: -1, // Render below everything, including other portals
+    },
+]);
+
+export const fixedBackgroundLayer = style([
+    sprinkles({
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        position: 'fixed',
+    }),
+    {
+        zIndex: -3,
+        '@media': {
+            [mq.desktopOrBigger]: {
+                display: 'none',
+            },
+        },
+    },
+]);
+
+export const absoluteBackgroundLayer = style([
+    sprinkles({
+        left: 0,
+        right: 0,
+        position: 'absolute',
+    }),
+    {
+        zIndex: -1,
+        '@media': {
+            [mq.desktopOrBigger]: {
+                display: 'none',
+            },
+        },
+    },
+]);