@telefonica/mistica 16.58.0-beta.2 → 16.59.0-beta.1

package/src/fixed-footer-layout.tsx

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

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

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

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

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