@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/fixed-footer-layout.tsx

@@ -1,215 +0,0 @@
-'use client';
-import * as React from 'react';
-import classnames from 'classnames';
-import {debounce} from './utils/helpers';
-import {isRunningAcceptanceTest} from './utils/platform';
-import {
-    useBoundingRect,
-    useElementDimensions,
-    useIsomorphicLayoutEffect,
-    useScreenSize,
-    useTheme,
-    useWindowSize,
-} from './hooks';
-import {
-    addPassiveEventListener,
-    getScrollableParentElement,
-    getScrollDistanceToBottom,
-    hasScroll,
-    removePassiveEventListener,
-} from './utils/dom';
-import {Portal} from './portal';
-import {vars} from './skins/skin-contract.css';
-import * as styles from './fixed-footer-layout.css';
-import {applyCssVars, safeAreaInsetBottom} from './utils/css';
-import {useFixedToTopHeight} from './fixed-to-top';
-import {useOverScrollColor} from './overscroll-color-context';
-
-const getScrollEventTarget = (el: HTMLElement) => (el === document.documentElement ? window : el);
-
-const waitForSwitchTransitionToStart = (fn: () => void) => {
-    const timeoutId = setTimeout(fn, 0);
-    return {
-        cancel: () => clearTimeout(timeoutId),
-    };
-};
-
-type Props = {
-    isFooterVisible?: boolean;
-    footer: React.ReactNode;
-    footerHeight?: number | string;
-    footerBgColor?: string;
-    footerRole?: string;
-    containerBgColor?: string;
-    children: React.ReactNode;
-    onChangeFooterHeight?: (heightInPx: number) => void;
-};
-
-const MIN_AVAILABLE_HEIGHT_FOR_FIXED = 200;
-
-const FixedFooterLayout = ({
-    isFooterVisible = true,
-    footer,
-    footerHeight = 'auto',
-    footerBgColor = vars.colors.background,
-    footerRole,
-    containerBgColor = vars.colors.background,
-    children,
-    onChangeFooterHeight,
-}: Props): JSX.Element => {
-    const [displayElevation, setDisplayElevation] = React.useState(false);
-    const containerRef = React.useRef<HTMLDivElement>(null);
-    const {height: contentHeight} = useBoundingRect(containerRef) || {height: 0};
-    const {isTabletOrSmaller} = useScreenSize();
-    const {platformOverrides} = useTheme();
-    // include margins to take into account marginBottom: safe-area-inset-bottom
-    const {height: domFooterHeight, ref} = useElementDimensions({includeMargins: true});
-    const {visualHeight} = useWindowSize();
-    const topDistance = useFixedToTopHeight();
-    const availableHeight = visualHeight - topDistance - domFooterHeight;
-    const isFooterFixed = availableHeight > MIN_AVAILABLE_HEIGHT_FOR_FIXED;
-    const {topColor = footerBgColor} = useOverScrollColor();
-    const {height: gradientHeight, ref: gradientRef} = useElementDimensions();
-
-    useIsomorphicLayoutEffect(() => {
-        onChangeFooterHeight?.(domFooterHeight);
-    }, [onChangeFooterHeight, domFooterHeight]);
-
-    React.useEffect(() => {
-        /**
-         * There is no elevation in desktop devices and we don't display it in acceptance tests or when the
-         * content's height is too small, so we avoid unnecesary calculations in these cases.
-         */
-        if (!isTabletOrSmaller || isRunningAcceptanceTest(platformOverrides) || !isFooterFixed) {
-            setDisplayElevation(false);
-            return;
-        }
-
-        const scrollable = getScrollableParentElement(containerRef.current);
-
-        const shouldDisplayElevation = () =>
-            hasScroll(scrollable) && getScrollDistanceToBottom(scrollable) > topDistance + 1; // This is 1 and not 0 because a weird bug with Safari
-
-        const checkDisplayElevation = debounce(
-            () => {
-                setDisplayElevation(shouldDisplayElevation());
-            },
-            50,
-            {leading: true, maxWait: 100}
-        );
-
-        const transitionAwaiter = waitForSwitchTransitionToStart(checkDisplayElevation);
-        const scrollEventTarget = getScrollEventTarget(scrollable);
-        addPassiveEventListener(scrollEventTarget, 'resize', checkDisplayElevation);
-        addPassiveEventListener(scrollEventTarget, 'scroll', checkDisplayElevation);
-        return () => {
-            checkDisplayElevation.cancel();
-            removePassiveEventListener(scrollEventTarget, 'scroll', checkDisplayElevation);
-            removePassiveEventListener(scrollEventTarget, 'resize', checkDisplayElevation);
-            transitionAwaiter.cancel();
-        };
-    }, [
-        platformOverrides,
-        isTabletOrSmaller,
-        isFooterFixed,
-        // `topDistance` and `contentHeight` dependencies are needed to recalculate the elevation state
-        topDistance,
-        contentHeight,
-    ]);
-
-    /**
-     * Diagram of the layout:
-     * https://excalidraw.com/#json=No0s6LB7QO735nv-wGIEP,9OOuqiaFInbtr1YjMm4g4Q
-     */
-    const renderBackground = () => {
-        return (
-            <Portal className={styles.portal}>
-                <div
-                    className={styles.fixedBackgroundLayer}
-                    style={{
-                        background: `linear-gradient(180deg, ${topColor} 50%, ${footerBgColor} 50% 100%)`,
-                    }}
-                />
-                <div
-                    ref={gradientRef}
-                    className={styles.absoluteBackgroundLayer}
-                    style={{
-                        background: containerBgColor, // this color could be a gradient
-                        top: topDistance - 1, // -1 because the navigationbar could have a 1px transparent background
-                        bottom: isFooterFixed ? domFooterHeight : 'unset',
-                        height: isFooterFixed ? 'unset' : contentHeight,
-                    }}
-                />
-
-                <div
-                    className={styles.absoluteBackgroundLayer}
-                    style={{
-                        background: footerBgColor,
-                        top: gradientHeight + topDistance - 1,
-                        height: `calc(${contentHeight}px - ${gradientHeight}px)`,
-                    }}
-                />
-            </Portal>
-        );
-    };
-
-    return (
-        <>
-            <div
-                ref={containerRef}
-                className={styles.container}
-                style={applyCssVars({
-                    [styles.vars.footerHeight]: isFooterFixed ? `${domFooterHeight}px` : '0px',
-                })}
-            >
-                {renderBackground()}
-                {children}
-            </div>
-            {isFooterVisible && isFooterFixed && (
-                /**
-                 * This style is added to the `html` element to prevent the footer
-                 * from covering the focus of elements when there is overflow.
-                 */
-                <style>{`html {scroll-padding-bottom: ${domFooterHeight}px}`}</style>
-            )}
-            <div
-                className={classnames(styles.footer, {
-                    [styles.withoutFooter]: !isFooterVisible,
-                    [styles.elevated]: displayElevation,
-                    [styles.fixedFooter]: isFooterFixed,
-                })}
-                /**
-                 * This style is inline to avoid creating a class that may collide with
-                 * other fixed footers during the page animation transition
-                 */
-                style={{
-                    background: isTabletOrSmaller ? footerBgColor : undefined,
-                }}
-                data-testid={`fixed-footer${isFooterVisible ? '-visible' : '-hidden'}`}
-                /**
-                 * This hints about the position of the fixed element. Other components could select nodes
-                 * with this data attribute to correctly position it while transitioning. For example in
-                 * WebApp's PageTransition (see `switch-transition.js` in webapp repo)
-                 */
-                data-position-fixed="bottom"
-            >
-                {isFooterVisible && (
-                    <div
-                        role={footerRole}
-                        ref={ref}
-                        data-component-name="FixedFooter"
-                        data-testid="FixedFooter"
-                        style={{
-                            height: footerHeight,
-                            marginBottom: safeAreaInsetBottom,
-                        }}
-                    >
-                        {footer}
-                    </div>
-                )}
-            </div>
-        </>
-    );
-};
-
-export default FixedFooterLayout;

package/src/fixed-to-top.tsx

@@ -1,21 +0,0 @@
-'use client';
-import * as React from 'react';
-
-export const TopDistanceContext: React.Context<number> = React.createContext(0);
-
-type Props = {
-    children: (topDistance: number) => React.ReactNode;
-    // The height of the element to be positioned fixed to top
-    height: number;
-};
-
-const FixedToTop = ({children, height}: Props): JSX.Element => {
-    const top = React.useContext(TopDistanceContext);
-    return <TopDistanceContext.Provider value={top + height}>{children(top)}</TopDistanceContext.Provider>;
-};
-
-export const useFixedToTopHeight = (): number => {
-    return React.useContext(TopDistanceContext);
-};
-
-export default FixedToTop;

package/src/focus-trap.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import ReactFocusLock from 'react-focus-lock';
-
-type Props = {
-    children: React.ReactNode;
-    className?: string;
-    disabled?: boolean;
-    group?: string;
-};
-
-const FocusTrap = ({children, disabled, className, group}: Props): JSX.Element => (
-    <ReactFocusLock noFocusGuards disabled={disabled} className={className} group={group}>
-        {children}
-    </ReactFocusLock>
-);
-
-export default FocusTrap;

package/src/form-context.tsx

@@ -1,198 +0,0 @@
-'use client';
-import * as React from 'react';
-import {useTheme} from './hooks';
-import * as tokens from './text-tokens';
-
-export type FormStatus = 'filling' | 'sending';
-export type FormErrors = {[name: string]: string | undefined};
-export type FieldValidator = (value: any, rawValue: string) => string | undefined;
-
-export type FieldRegistration = {
-    input?: HTMLInputElement | HTMLSelectElement | null;
-    validator?: FieldValidator;
-    focusableElement?: HTMLDivElement | HTMLSelectElement | null;
-    label?: string;
-    required?: boolean;
-};
-
-type Context = {
-    // raw values are the real input values
-    rawValues: {[name: string]: any};
-    setRawValue: (param: {readonly name: string; readonly value: any}) => void;
-    // these values can have some kind of postprocessing. For example, remove spaces from credit card numbers
-    values: {[name: string]: any};
-    setValue: (param: {readonly name: string; readonly value: any}) => void;
-    formStatus: FormStatus;
-    register: (name: string, ref: FieldRegistration) => void;
-    formErrors: FormErrors;
-    setFormError: (param: {readonly name: string; readonly error?: string}) => void;
-    jumpToNext: (currentName: string) => void;
-    submit: () => void;
-    validate: () => FormErrors;
-    formId: string;
-};
-
-export const FormContext = React.createContext<Context>({
-    values: {},
-    setValue: () => {},
-    rawValues: {},
-    setRawValue: () => {},
-    formStatus: 'filling',
-    register: () => {},
-    formErrors: {},
-    setFormError: () => {},
-    jumpToNext: () => {},
-    submit: () => {},
-    validate: () => ({}),
-    formId: '',
-});
-
-export const useForm = (): Context => React.useContext(FormContext);
-
-export const useControlProps = <T,>({
-    name,
-    label,
-    value,
-    defaultValue,
-    onChange,
-    disabled,
-}: {
-    name: string;
-    label?: string;
-    value: undefined | T;
-    defaultValue: undefined | T;
-    onChange: undefined | ((value: T) => void);
-    disabled?: boolean;
-}): {
-    name: string;
-    label?: string;
-    value?: T;
-    defaultValue?: T;
-    onChange: (value: T) => void;
-    focusableRef: (focusableElement: HTMLDivElement | null) => void;
-    disabled: boolean | undefined;
-} => {
-    const {setRawValue, setValue, rawValues, setFormError, register, formStatus} = useForm();
-
-    React.useEffect(() => {
-        if (rawValues[name] === undefined) {
-            const initialValue = value ?? defaultValue ?? false;
-            setValue({name, value: initialValue});
-            setRawValue({name, value: initialValue});
-        }
-    }, [value, name, defaultValue, rawValues, setValue, setRawValue]);
-
-    return {
-        name,
-        label,
-        value,
-        defaultValue: defaultValue ?? (value === undefined ? rawValues[name] ?? false : undefined),
-        focusableRef: (focusableElement: HTMLDivElement | null) =>
-            register(name, {
-                focusableElement,
-                label,
-            }),
-        onChange: (value: T) => {
-            setRawValue({name, value});
-            setValue({name, value});
-            setFormError({name, error: ''});
-            onChange?.(value);
-        },
-        disabled: formStatus === 'sending' || disabled,
-    };
-};
-
-export const useFieldProps = ({
-    name,
-    label,
-    value,
-    defaultValue,
-    processValue,
-    helperText,
-    optional,
-    error,
-    disabled,
-    onBlur,
-    validate,
-    validateOnBlurInsideForm = true,
-    onChange,
-    onChangeValue,
-}: {
-    name: string;
-    label: string;
-    value?: string;
-    defaultValue?: string;
-    processValue: (value: string) => unknown;
-    helperText?: string;
-    optional?: boolean;
-    error?: boolean;
-    disabled?: boolean;
-    onBlur?: React.FocusEventHandler;
-    validate?: (value: any, rawValue: string) => string | undefined;
-    validateOnBlurInsideForm?: boolean;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onChangeValue?: (value: any, rawValue: string) => void;
-}): {
-    value?: string;
-    defaultValue?: string;
-    name: string;
-    label: string;
-    helperText?: string;
-    required: boolean;
-    error: boolean;
-    disabled: boolean;
-    onBlur: React.FocusEventHandler | undefined;
-    inputRef: (field: HTMLInputElement | null) => void;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-} => {
-    const {texts, t} = useTheme();
-    const {setRawValue, setValue, rawValues, values, formErrors, formStatus, setFormError, register} =
-        useForm();
-    const rawValue = value ?? defaultValue ?? rawValues[name] ?? '';
-    const processValueRef = React.useRef(processValue);
-
-    React.useEffect(() => {
-        setRawValue({name, value: rawValue});
-        setValue({name, value: processValueRef.current(rawValue)});
-    }, [name, rawValue, setRawValue, setValue]);
-
-    React.useEffect(() => {
-        if (disabled) {
-            setFormError({name, error: undefined});
-        }
-    }, [disabled, name, setFormError]);
-
-    return {
-        value,
-        defaultValue: defaultValue ?? (value === undefined ? rawValues[name] ?? '' : undefined),
-        name,
-        label,
-        helperText: formErrors[name] || helperText,
-        required: !optional,
-        error: error || !!formErrors[name],
-        disabled: disabled || formStatus === 'sending',
-        onBlur: validateOnBlurInsideForm
-            ? (e: React.FocusEvent) => {
-                  let error: string | undefined;
-                  if (!rawValues[name] && !optional) {
-                      error = texts.formFieldErrorIsMandatory || t(tokens.formFieldErrorIsMandatory);
-                  } else if (validate) {
-                      error = validate(values[name], rawValues[name]);
-                  }
-                  setFormError({name, error});
-                  onBlur?.(e);
-              }
-            : onBlur,
-        inputRef: (input: HTMLInputElement | null) =>
-            register(name, {input, validator: validate, label, required: !optional}),
-        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
-            const rawValue = event.currentTarget.value;
-            const value = processValue(rawValue);
-            setRawValue({name, value: rawValue});
-            setValue({name, value});
-            setFormError({name, error: ''});
-            onChange?.(event);
-            onChangeValue?.(value, rawValue);
-        },
-    };
-};

package/src/form.css.ts

@@ -1,5 +0,0 @@
-import {sprinkles} from './sprinkles.css';
-
-export const form = sprinkles({
-    width: '100%',
-});