@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/file-upload.tsx

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

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