@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/select.tsx

@@ -1,513 +0,0 @@
-'use client';
-import * as React from 'react';
-import classnames from 'classnames';
-import {useForm} from './form-context';
-import {useTheme} from './hooks';
-import {DOWN, ENTER, ESC, SPACE, TAB, UP} from './utils/keys';
-import {FieldContainer, HelperText, Label, useApplyCssVars} from './text-field-components';
-import IconChevronDownRegular from './generated/mistica-icons/icon-chevron-down-regular';
-import {TextFieldBaseAutosuggest} from './text-field-base';
-import Overlay from './overlay';
-import {isAndroid, isIos} from './utils/platform';
-import {cancelEvent} from './utils/dom';
-import {Text3} from './text';
-import * as styles from './select.css';
-import * as textStyles from './text-field-base.css';
-import {Portal} from './portal';
-import {applyCssVars, pxToRem} from './utils/css';
-import {ThemeVariant} from './theme-variant-context';
-import {vars} from './skins/skin-contract.css';
-
-import type {DataAttributes} from './utils/types';
-
-export type SelectProps = {
-    disabled?: boolean;
-    error?: boolean;
-    helperText?: string;
-    id?: string;
-    label: string;
-    name: string;
-    optional?: boolean;
-    showOptionalLabel?: boolean;
-    validate?: (value: string | void, rawValue: string | void) => string | void;
-    onChangeValue?: (value: string) => void;
-    onBlur?: (event: React.FocusEvent<any>) => void;
-    options: ReadonlyArray<{
-        readonly value: string;
-        readonly text: string;
-    }>;
-    autoFocus?: boolean;
-    value?: string;
-    defaultValue?: string;
-    fullWidth?: boolean;
-    native?: boolean;
-    children?: void;
-    dataAttributes?: DataAttributes;
-};
-
-const Select = ({
-    id,
-    label,
-    helperText: helperTextProp,
-    value: valueProp,
-    defaultValue,
-    onChangeValue: onChangeValueProp,
-    name,
-    fullWidth,
-    options,
-    optional,
-    showOptionalLabel,
-    disabled: disabledProp,
-    error: errorProp,
-    onBlur,
-    autoFocus = false,
-    native,
-    dataAttributes,
-}: SelectProps): JSX.Element => {
-    const inputRef = React.useRef<HTMLSelectElement | HTMLInputElement>(null);
-    const focusableRef = React.useRef<HTMLSelectElement | HTMLDivElement>(null);
-    const fieldRef = React.useRef<HTMLDivElement>(null);
-    const optionsMenuRef = React.useRef<HTMLUListElement>(null);
-    const optionRefs = React.useRef(new Map<string, HTMLLIElement>());
-    const [isServerSide, setIsServerSide] = React.useState(true);
-    const [valueState, setValueState] = React.useState<string | undefined>(defaultValue);
-    const [optionsShown, setOptionsShown] = React.useState(false);
-    const [animateShowOptions, setAnimateShowOptions] = React.useState(false);
-    const [isFocused, setIsFocused] = React.useState(false);
-    const [optionsComputedProps, setOptionsComputedProps] = React.useState<{
-        top?: number;
-        left?: number;
-        maxHeight?: number;
-        minWidth?: number;
-        transformOrigin?: string;
-    }>({});
-    const [tentativeValueState, setTentativeValueState] = React.useState<string>();
-    const lastElementSelectionScrollTop = React.useRef<number>(null);
-    const reactId = React.useId();
-    const inputId = id || reactId;
-    const {
-        rawValues,
-        setRawValue,
-        setValue: formSetValue,
-        formStatus,
-        formErrors,
-        setFormError,
-        register,
-    } = useForm();
-    const {platformOverrides} = useTheme();
-    const cssVarStyles = useApplyCssVars();
-
-    const shouldUseNative =
-        native ||
-        (process.env.NODE_ENV === 'test' && !process.env.SSR_TEST) ||
-        isAndroid(platformOverrides) ||
-        isIos(platformOverrides);
-
-    const disabled = disabledProp || formStatus === 'sending';
-    const error = errorProp || !!formErrors[name];
-    const helperText = formErrors[name] || helperTextProp;
-    const value = valueProp ?? rawValues[name];
-
-    const onChangeValue = (value: string) => {
-        onChangeValueProp?.(value);
-        setFormError({name, error: ''});
-        setRawValue({name, value});
-        formSetValue({name, value});
-    };
-
-    const toggleOptions = (show: boolean) => {
-        if (show) {
-            if (fieldRef?.current) {
-                const MAX_OPTIONS = 8;
-                const MARGIN_TOP_SIZE = 12;
-                const PADDING_SIZE = 16;
-
-                const clientRect = fieldRef.current.getBoundingClientRect();
-                const availableSpaceTop = clientRect.top;
-                const width = clientRect.width;
-                const left = clientRect.left;
-                const height = clientRect.height;
-
-                const top = availableSpaceTop + height;
-                const visibleOptions = Math.min(options.length, MAX_OPTIONS);
-                const spaceTaken = visibleOptions * 48 + PADDING_SIZE;
-                // if it doesn't fit on bottom
-                if (top + spaceTaken + MARGIN_TOP_SIZE > window.innerHeight) {
-                    const availableSpaceBottom = window.innerHeight - top;
-                    if (availableSpaceTop > availableSpaceBottom) {
-                        const newTop = availableSpaceTop - spaceTaken;
-                        setOptionsComputedProps({
-                            minWidth: width,
-                            left,
-                            top: Math.max(newTop, MARGIN_TOP_SIZE),
-                            maxHeight: Math.min(availableSpaceTop - MARGIN_TOP_SIZE, spaceTaken),
-                            transformOrigin: 'center bottom',
-                        });
-                    } else {
-                        setOptionsComputedProps({
-                            minWidth: width,
-                            top,
-                            left,
-                            maxHeight: window.innerHeight - top - MARGIN_TOP_SIZE,
-                            transformOrigin: 'center top',
-                        });
-                    }
-                } else {
-                    // if it fits on bottom
-                    setOptionsComputedProps({
-                        minWidth: width,
-                        top,
-                        left,
-                        maxHeight: spaceTaken,
-                        transformOrigin: 'center top',
-                    });
-                }
-            }
-            setOptionsShown(true);
-            requestAnimationFrame(() => {
-                if (
-                    lastElementSelectionScrollTop.current &&
-                    optionsMenuRef.current &&
-                    'scrollTop' in optionsMenuRef.current
-                ) {
-                    optionsMenuRef.current.scrollTop = lastElementSelectionScrollTop.current;
-                }
-                setAnimateShowOptions(true);
-            });
-            setTentativeValueState(valueState ?? value);
-        } else {
-            setAnimateShowOptions(false);
-            setOptionsShown(false);
-            setTentativeValueState(undefined);
-        }
-    };
-
-    const setValue = (val?: string) => {
-        // @ts-expect-error current is typed as read-only
-        lastElementSelectionScrollTop.current = optionsMenuRef.current?.scrollTop;
-        toggleOptions(false);
-        if (onChangeValue && typeof val === 'string') {
-            onChangeValue(val);
-        }
-        if (typeof value === 'undefined') {
-            setValueState(val);
-        }
-    };
-
-    const scrollIntoTargetListElement = (targetValueState: string) => {
-        const menuClientRect = optionsMenuRef.current?.getBoundingClientRect();
-        if (menuClientRect && targetValueState && optionRefs.current.has(targetValueState)) {
-            const itemRef = optionRefs.current.get(targetValueState);
-            const clientRect = itemRef?.getBoundingClientRect();
-            if (
-                clientRect &&
-                clientRect.top + clientRect.height / 2 >= menuClientRect.top + menuClientRect.height
-            ) {
-                itemRef?.scrollIntoView();
-                return;
-            }
-            if (clientRect && clientRect.top + clientRect.height / 2 <= menuClientRect.top) {
-                itemRef?.scrollIntoView(false);
-            }
-        }
-    };
-
-    const focusableElement = focusableRef.current;
-    const inputElement = inputRef.current;
-
-    React.useEffect(() => {
-        setRawValue({name, value});
-        formSetValue({name, value});
-    }, [name, setRawValue, formSetValue, value]);
-
-    React.useEffect(() => {
-        register(name, {
-            input: inputRef.current,
-            focusableElement: focusableRef.current,
-            label,
-        });
-        return () => {
-            register(name, {input: null, focusableElement: null, label: ''});
-        };
-    }, [name, register, focusableRef, inputRef, focusableElement, inputElement, label]);
-
-    React.useEffect(() => {
-        const updateTentativeValueState = (e: KeyboardEvent) => {
-            const keyToOperand: Record<string, 1 | -1 | undefined> = {[UP]: -1, [DOWN]: 1};
-            const operand = keyToOperand[e.key];
-            if (operand) {
-                cancelEvent(e);
-                const newTentativeValueState =
-                    options[options.findIndex(({value}) => value === tentativeValueState) + operand]?.value ??
-                    tentativeValueState;
-                setTentativeValueState(newTentativeValueState);
-                scrollIntoTargetListElement(newTentativeValueState);
-            }
-        };
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (optionsShown) {
-                switch (e.key) {
-                    case TAB:
-                        cancelEvent(e);
-                        break;
-                    case ESC:
-                        toggleOptions(false);
-                        break;
-                    case ENTER:
-                    case SPACE:
-                        cancelEvent(e);
-                        if (
-                            options.findIndex(({value}) => value === tentativeValueState) !== -1 &&
-                            tentativeValueState !== valueState
-                        ) {
-                            setValue(tentativeValueState);
-                        }
-                        toggleOptions(false);
-                        break;
-                    default:
-                    // do nothing
-                }
-            }
-            // so we don't change the tentativeValueState while menu is closing
-            if (animateShowOptions) {
-                updateTentativeValueState(e);
-            }
-        };
-        document.addEventListener('keydown', handleKeyDown, false);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown, false);
-        };
-    });
-
-    React.useEffect(() => {
-        if (autoFocus && focusableRef.current) {
-            focusableRef.current.focus();
-        }
-    }, [autoFocus]);
-
-    React.useEffect(() => {
-        // We use this Ref to always use the native variant in the first render, this way we avoid hydration issues when using SSR
-        setIsServerSide(false);
-    }, []);
-
-    // When the value is null/undefined/'' we assume it's the default empty option and we don't show any label
-    const getOptionText = (val?: string) => (val ? options.find(({value}) => value === val)?.text : '');
-
-    const containerActiveProps = {
-        tabIndex: 0,
-        onFocus: () => setIsFocused(true),
-        onBlur: () => setIsFocused(false),
-        onClick: () => {
-            toggleOptions(true);
-            setIsFocused(true);
-        },
-        onKeyDown: (e: React.KeyboardEvent) => {
-            if (!optionsShown && (e.key === SPACE || e.key === ENTER)) {
-                cancelEvent(e);
-                toggleOptions(true);
-            }
-        },
-    };
-
-    const iconSize = pxToRem(20);
-
-    const selectedValue = valueState ?? value;
-
-    return (
-        <ThemeVariant variant="default">
-            {shouldUseNative || isServerSide ? (
-                <FieldContainer
-                    disabled={disabled}
-                    helperText={<HelperText error={error} leftText={helperText} />}
-                    fieldRef={fieldRef}
-                    fullWidth={fullWidth}
-                    dataAttributes={{testid: 'Select', ...dataAttributes}}
-                >
-                    {label && (
-                        <Label
-                            error={error}
-                            forId={inputId}
-                            inputState={
-                                isFocused
-                                    ? 'focused'
-                                    : selectedValue ?? inputRef.current?.value
-                                      ? 'filled'
-                                      : 'default'
-                            }
-                            showOptional={optional && showOptionalLabel}
-                        >
-                            {label}
-                        </Label>
-                    )}
-                    <select
-                        className={classnames(
-                            styles.selectVariants[disabled ? 'disabled' : 'default'],
-                            label ? textStyles.inputWithLabel : textStyles.inputWithoutLabel
-                        )}
-                        id={inputId}
-                        aria-invalid={!!error}
-                        value={selectedValue}
-                        required={!optional}
-                        disabled={disabled}
-                        onChange={(e) => {
-                            setValue(e.target.value);
-                        }}
-                        onFocus={() => setIsFocused(true)}
-                        onBlur={(e) => {
-                            setIsFocused(false);
-                            onBlur?.(e);
-                        }}
-                        ref={(actualRef) => {
-                            [inputRef, focusableRef].forEach((currentRef) => {
-                                currentRef.current = actualRef;
-                            });
-                        }}
-                        style={{
-                            // Override default browser opacity when disabled. This opacity also affects the label.
-                            // Without this fix, the label is invisible when disabled
-                            opacity: 1,
-                            // Use transparent color for the empty option (show below) to avoid showing it when the menu is closed
-                            color: selectedValue ? undefined : 'transparent',
-                        }}
-                    >
-                        {!selectedValue && options.every(({value}) => !!value) && (
-                            // If no "empty" option exists, insert a dummy empty option. Once an option is selected,
-                            // this empty option is removed. This is needed to allow a native select without a selected
-                            // default option.
-                            // Chrome doesn't show this option when the select menu is open (because of display: none),
-                            // but Safari does. So we use the select's label for this option, otherwise it would be shown
-                            // as an empty option, which is weirder.
-                            <option value="" style={{display: 'none'}} aria-label="">
-                                {label}
-                            </option>
-                        )}
-                        {options.map(({value: val, text}) => (
-                            // Set color: 'initial' to avoid wrong text color in some browsers when using dark mode.
-                            // Similar issue in another lib: https://github.com/chakra-ui/chakra-ui/issues/417#issue-566611352
-                            <option key={val} value={val} style={{color: 'initial'}}>
-                                {text}
-                            </option>
-                        ))}
-                    </select>
-                    <div className={styles.arrowDown} aria-hidden>
-                        <div className={styles.iconContainer} data-testid="endIcon">
-                            <IconChevronDownRegular size={iconSize} color={vars.colors.neutralMedium} />
-                        </div>
-                    </div>
-                </FieldContainer>
-            ) : (
-                <>
-                    <div
-                        className={styles.selectContainerVariants[fullWidth ? 'fullWidth' : 'default']}
-                        role="button"
-                        aria-haspopup="listbox"
-                        ref={focusableRef as React.Ref<HTMLDivElement>}
-                        {...(!disabled && containerActiveProps)}
-                        style={cssVarStyles}
-                    >
-                        <TextFieldBaseAutosuggest
-                            style={{visibility: 'hidden'}}
-                            fullWidth={fullWidth}
-                            endIcon={
-                                <div className={styles.iconContainer}>
-                                    <IconChevronDownRegular
-                                        size={iconSize}
-                                        color={vars.colors.neutralMedium}
-                                    />
-                                </div>
-                            }
-                            focus={isFocused}
-                            label={label}
-                            value={selectedValue}
-                            shrinkLabel={!!(value || valueState)}
-                            name={name}
-                            helperText={helperText}
-                            required={!optional}
-                            disabled={disabled}
-                            id={inputId}
-                            error={error}
-                            inputRef={inputRef}
-                            fieldRef={fieldRef}
-                            dataAttributes={{testid: 'Select', ...dataAttributes}}
-                        />
-
-                        <div
-                            className={classnames(
-                                styles.selectTextVariants[disabled ? 'disabled' : 'default'],
-                                label ? textStyles.inputWithLabel : textStyles.inputWithoutLabel
-                            )}
-                        >
-                            {getOptionText(selectedValue)}
-                        </div>
-                    </div>
-                    {optionsShown && (
-                        <Overlay
-                            onPress={(e) => {
-                                toggleOptions(false);
-                                cancelEvent(e);
-                            }}
-                            disableScroll
-                        >
-                            <Portal>
-                                <ul
-                                    style={applyCssVars({
-                                        [styles.vars.top]: optionsComputedProps.top
-                                            ? `${optionsComputedProps.top}px`
-                                            : '',
-                                        [styles.vars.left]: optionsComputedProps.left
-                                            ? `${optionsComputedProps.left}px`
-                                            : '',
-                                        [styles.vars.maxHeight]: optionsComputedProps.maxHeight
-                                            ? `${optionsComputedProps.maxHeight}px`
-                                            : '',
-                                        [styles.vars.minWidth]: optionsComputedProps.minWidth
-                                            ? `${optionsComputedProps.minWidth}px`
-                                            : '',
-                                        [styles.vars.transformOrigin]:
-                                            optionsComputedProps.transformOrigin ?? '',
-                                    })}
-                                    onPointerDown={cancelEvent}
-                                    className={classnames(
-                                        styles.optionsContainer,
-                                        animateShowOptions
-                                            ? styles.optionsAnimationsVariants.show
-                                            : styles.optionsAnimationsVariants.hide
-                                    )}
-                                    role="listbox"
-                                    ref={optionsMenuRef}
-                                >
-                                    {options.map(({value: val, text}) => (
-                                        <li
-                                            role="option"
-                                            aria-selected={val === (valueState ?? value)}
-                                            key={val}
-                                            data-value={val}
-                                            className={classnames(styles.menuItem, {
-                                                [styles.menuItemSelected]:
-                                                    val === tentativeValueState ||
-                                                    val === (valueState ?? value),
-                                            })}
-                                            onPointerDown={cancelEvent}
-                                            onClick={() => setValue(val)}
-                                            ref={(liRef) => {
-                                                if (liRef) {
-                                                    optionRefs.current.set(val, liRef);
-                                                } else {
-                                                    optionRefs.current.delete(val);
-                                                }
-                                            }}
-                                        >
-                                            <Text3 regular>{text}</Text3>
-                                        </li>
-                                    ))}
-                                </ul>
-                            </Portal>
-                        </Overlay>
-                    )}
-                </>
-            )}
-        </ThemeVariant>
-    );
-};
-
-export default Select;

package/src/sheet-action-row.css.ts

@@ -1,33 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import * as mq from './media-queries.css';
-import {vars as skinVars} from './skins/skin-contract.css';
-import {sprinkles} from './sprinkles.css';
-
-export const sheetActionRow = style([
-    sprinkles({
-        display: 'flex',
-        padding: 16,
-        minHeight: 72,
-        alignItems: 'center',
-    }),
-    {
-        transition: 'background-color 0.1s ease-in-out',
-        ':active': {
-            background: skinVars.colors.backgroundContainerPressed,
-        },
-        '@media': {
-            [mq.supportsHover]: {
-                ':hover': {
-                    background: skinVars.colors.backgroundContainerHover,
-                },
-                // need to repeat this inside of @media to avoid :hover background to take precedence over :active
-                ':active': {
-                    background: skinVars.colors.backgroundContainerPressed,
-                },
-            },
-            [mq.touchableOnly]: {
-                transition: 'none',
-            },
-        },
-    },
-]);

package/src/sheet-actions-list.tsx

@@ -1,113 +0,0 @@
-'use client';
-import * as React from 'react';
-import Sheet, {SheetBody} from './sheet-common';
-import {useTheme} from './hooks';
-import Box from './box';
-import {Text3} from './text';
-import {vars as skinVars} from './skins/skin-contract.css';
-import * as styles from './sheet-action-row.css';
-import Image from './image';
-import NegativeBox from './negative-box';
-import Touchable from './touchable';
-
-import type {ExclusifyUnion} from './utils/utility-types';
-import type {DataAttributes, IconProps} from './utils/types';
-
-type ActionsListSheetProps = {
-    title?: string;
-    subtitle?: string;
-    description?: string | ReadonlyArray<string>;
-    items: ReadonlyArray<{
-        id: string;
-        title: string;
-        /** "normal" by default */
-        style?: 'normal' | 'destructive';
-        icon?: ExclusifyUnion<
-            | {
-                  /** @deprecated - use url instead */
-                  Icon: React.ComponentType<IconProps>;
-              }
-            | {
-                  url: string;
-                  urlDark?: string;
-              }
-        >;
-    }>;
-    onClose?: () => void;
-    onSelect?: (id: string) => void;
-    dataAttributes?: DataAttributes;
-};
-
-const ActionsListSheet = React.forwardRef<HTMLDivElement, ActionsListSheetProps>(
-    ({title, subtitle, description, items, onClose, onSelect, dataAttributes}, ref) => {
-        const {isDarkMode} = useTheme();
-
-        return (
-            <Sheet
-                onClose={onClose}
-                ref={ref}
-                dataAttributes={{'component-name': 'ActionsListSheet', ...dataAttributes}}
-            >
-                {({closeModal, modalTitleId}) => (
-                    <SheetBody
-                        title={title}
-                        subtitle={subtitle}
-                        description={description}
-                        modalTitleId={modalTitleId}
-                    >
-                        <NegativeBox>
-                            {items.map(({id, style, title, icon}) => (
-                                <Touchable
-                                    key={id}
-                                    onPress={() => {
-                                        onSelect?.(id);
-                                        closeModal();
-                                    }}
-                                >
-                                    <div className={styles.sheetActionRow}>
-                                        {icon && (
-                                            <Box paddingRight={16}>
-                                                {icon.Icon ? (
-                                                    <icon.Icon
-                                                        size={24}
-                                                        color={
-                                                            style === 'destructive'
-                                                                ? skinVars.colors.textLinkDanger
-                                                                : skinVars.colors.neutralHigh
-                                                        }
-                                                    />
-                                                ) : (
-                                                    <Image
-                                                        circular
-                                                        src={
-                                                            isDarkMode && icon.urlDark
-                                                                ? icon.urlDark
-                                                                : icon.url
-                                                        }
-                                                        width={40}
-                                                    />
-                                                )}
-                                            </Box>
-                                        )}
-                                        <Text3
-                                            regular
-                                            color={
-                                                style === 'destructive'
-                                                    ? skinVars.colors.textLinkDanger
-                                                    : skinVars.colors.textPrimary
-                                            }
-                                        >
-                                            {title}
-                                        </Text3>
-                                    </div>
-                                </Touchable>
-                            ))}
-                        </NegativeBox>
-                    </SheetBody>
-                )}
-            </Sheet>
-        );
-    }
-);
-
-export default ActionsListSheet;