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

package/src/meter.tsx

@@ -0,0 +1,516 @@
+// https://www.figma.com/design/jWWCJ9kYl6I5uHLz3GcgRp/%F0%9F%94%B6-%5BREADY%5D-Data-Visualizations-Specs
+'use client';
+import * as React from 'react';
+import {vars} from './skins/skin-contract.css';
+// @ts-expect-error - no types
+import bezier from 'cubic-bezier';
+import {getPrefixedDataAttributes} from './utils/dom';
+import {useThemeVariant} from './theme-variant-context';
+import {useElementDimensions, useTheme} from './hooks';
+import {meterTotalLabel, meterSectionLabel} from './text-tokens';
+import {isRunningAcceptanceTest} from './utils/platform';
+
+import type {DataAttributes} from './utils/types';
+
+const VIEW_BOX_WIDTH = 100;
+const CENTER_X = VIEW_BOX_WIDTH / 2;
+const CENTER_Y = VIEW_BOX_WIDTH / 2;
+
+const STROKE_WIDTH_PX = 6;
+const SEPARATION_PX = 2;
+
+const ANIMATION_DELAY_MS = 200;
+const ANIMATION_DURATION_MS = 1000;
+const ANIMATION_EPSILON = 1000 / 60 / ANIMATION_DURATION_MS / 4;
+
+const MAX_SEGMENT_VALUE = 100;
+const SMALL_VALUE_THRESHOLD = 0.0001;
+
+const TYPE_LINEAR = 'linear';
+const TYPE_ANGULAR = 'angular';
+const TYPE_CIRCULAR = 'circular';
+
+export type MeterType = typeof TYPE_LINEAR | typeof TYPE_ANGULAR | typeof TYPE_CIRCULAR;
+
+const DEFAULT_COLORS = [
+    vars.colors.controlActivated,
+    vars.colors.warning,
+    vars.colors.success,
+    vars.colors.highlight,
+    vars.colors.promo,
+];
+
+const DEFAULT_COLORS_OVER_BRAND = [
+    vars.colors.controlActivatedBrand,
+    vars.colors.warning,
+    vars.colors.success,
+    vars.colors.highlight,
+    vars.colors.promo,
+];
+
+/**
+ * "start"/"end" values for each segment of the meter. The values are in the range [0, 1]
+ */
+type Segment = {
+    start: number;
+    end: number;
+};
+
+/**
+ * Cubic bezier easing function https://github.com/arian/cubic-bezier/blob/27d2512d15a0b873fa0fca8769069c7b290e80f8/index.js
+ * @param time - time in the range [0, 1]
+ */
+const timingFunction: (time: number) => number = bezier(0.75, 0, 0.27, 1, ANIMATION_EPSILON);
+
+const clamp = (n: number, min: number, max: number) => Math.min(Math.max(n, min), max);
+
+/**
+ * Calculate the start and end segment values for each segment of the meter
+ */
+const calculateSegments = (
+    currentValues: Array<number>,
+    targetValues: Array<number>,
+    time: number,
+    reverse: boolean
+): Array<Segment> => {
+    const segments: Array<Segment> = [];
+
+    let startValue = 0;
+    let endValue = 0;
+    for (let i = 0; i < currentValues.length; i++) {
+        startValue += currentValues[i];
+        endValue += targetValues[i];
+
+        // each segment has an accumulated delay time. The last segment has no delay
+        const delay = ANIMATION_DELAY_MS * (reverse ? i : currentValues.length - 1 - i);
+        const animationTime = clamp((time - delay) / ANIMATION_DURATION_MS, 0, 1);
+
+        const t = clamp(timingFunction(animationTime), 0, 1);
+        const start = segments.at(-1)?.end || 0;
+        const end = clamp(startValue + (endValue - startValue) * t, 0, 1 - SMALL_VALUE_THRESHOLD);
+        segments.push({start, end});
+    }
+    return segments;
+};
+
+const createPath = ({
+    x1,
+    y1,
+    x2,
+    y2,
+    radius,
+    clockwise = 1,
+    largeArchFlag = 0,
+}: {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    radius: number;
+    clockwise?: 0 | 1 | boolean;
+    largeArchFlag?: 0 | 1 | boolean;
+}): string => {
+    const xAxisRotation = 0;
+    if (radius) {
+        //  https://www.nan.fyi/svg-paths/arcs
+        return `M ${x1} ${y1} A ${radius} ${radius} ${xAxisRotation} ${+largeArchFlag} ${+clockwise} ${x2} ${y2}`;
+    } else {
+        // https://www.nan.fyi/svg-paths/lines
+        return `M ${x1} ${y1} L ${x2} ${y2}`;
+    }
+};
+
+type MeterProps = {
+    type?: MeterType;
+    /** Position of the meter. 0 is at the start, 100 is at the end. The sum of the values must not exceed 100. */
+    values: Array<number>;
+    width?: number | string;
+    colors?: Array<string>;
+    reverse?: boolean;
+    dataAttributes?: DataAttributes;
+    extra?: React.ReactNode;
+    'aria-hidden'?: boolean | 'true' | 'false';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+
+const MeterComponent = ({
+    type = TYPE_ANGULAR,
+    width: widthProp = '100%',
+    colors,
+    values: valuesProp,
+    reverse = false,
+    dataAttributes,
+    'aria-hidden': ariaHidden = false,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    extra,
+}: MeterProps): JSX.Element => {
+    const {borderRadii, t} = useTheme();
+    const {ref: containerRef, width: containerWidth} = useElementDimensions();
+    const hasRoundLineCaps = parseInt(borderRadii.bar) !== 0;
+    const themeVariant = useThemeVariant();
+    const isOverMedia = themeVariant === 'media';
+    const isOverBrand = themeVariant === 'brand';
+    const isOverNegative = themeVariant === 'negative';
+    const segmentColors =
+        colors || (isOverBrand || isOverMedia || isOverNegative ? DEFAULT_COLORS_OVER_BRAND : DEFAULT_COLORS);
+    const [width, setWidth] = React.useState<number>(typeof widthProp === 'number' ? widthProp : 0);
+    const scaleFactor = width === 0 ? 1 : VIEW_BOX_WIDTH / width;
+    const lineCapRadiusPx = hasRoundLineCaps ? STROKE_WIDTH_PX / 2 : 0;
+    const lineCapRadius = lineCapRadiusPx * scaleFactor;
+    const strokeWidth = STROKE_WIDTH_PX * scaleFactor;
+    const radius = type === TYPE_LINEAR ? 0 : CENTER_X - strokeWidth / 2;
+    const separation = SEPARATION_PX * scaleFactor;
+
+    const id = React.useId();
+    const markerCurrentId = `marker-current-${id}`;
+    const markerStartId = `marker-start-${id}`;
+    const maskLastSegmentId = `mask-last-segment-${id}`;
+    const maskBarTrackId = `mask-bar-track-${id}`;
+
+    const shouldAnimate = React.useMemo(() => {
+        return (
+            window.matchMedia(`(prefers-reduced-motion: reduce)`).matches !== true &&
+            !isRunningAcceptanceTest()
+        );
+    }, []);
+
+    const maxValue =
+        type === TYPE_LINEAR
+            ? VIEW_BOX_WIDTH - lineCapRadius * 2
+            : type === TYPE_CIRCULAR
+              ? Math.PI * 2
+              : Math.PI;
+
+    const segmentSeparation =
+        type === TYPE_LINEAR ? separation / VIEW_BOX_WIDTH : separation / radius / maxValue;
+
+    const height =
+        type === TYPE_LINEAR ? STROKE_WIDTH_PX : type === TYPE_CIRCULAR ? width : width / 2 + lineCapRadiusPx;
+
+    const viewBoxHeight =
+        type === TYPE_LINEAR
+            ? strokeWidth
+            : type === TYPE_CIRCULAR
+              ? VIEW_BOX_WIDTH
+              : CENTER_X + lineCapRadius;
+
+    const trackbarColor = isOverMedia
+        ? vars.colors.inverse
+        : isOverBrand
+          ? vars.colors.barTrackBrand
+          : vars.colors.barTrack;
+
+    //  scale values to the range [0, 1]
+    const values = React.useMemo(() => {
+        return valuesProp.map((v) => v / MAX_SEGMENT_VALUE);
+    }, [valuesProp]);
+
+    // the animation starts with these values
+    const initialValuesRef = React.useRef<Array<number>>(
+        Array.from({length: values.length}, () => (reverse ? 1 : 0))
+    );
+
+    const [segments, setSegments] = React.useState<Array<Segment>>(() => {
+        return values.map(() => ({start: 0, end: 0}));
+    });
+
+    // this is to know which are the first and last visible segments, which have special treatments
+    let firstNonZeroIndex = -1;
+    let lastNonZeroIndex = -1;
+    for (let i = 0; i < segments.length; i++) {
+        if (segments[i].end - segments[i].start > SMALL_VALUE_THRESHOLD) {
+            if (firstNonZeroIndex < 0) {
+                firstNonZeroIndex = i;
+            }
+            lastNonZeroIndex = i;
+        }
+    }
+
+    const lastSegment: Segment | undefined = segments.at(-1);
+
+    React.useEffect(() => {
+        if (typeof widthProp === 'number') {
+            setWidth(widthProp);
+        } else {
+            setWidth(containerWidth);
+        }
+    }, [widthProp, containerWidth]);
+
+    React.useEffect(() => {
+        let raf: number;
+        const start = performance.now();
+        const end = start + ANIMATION_DURATION_MS + ANIMATION_DELAY_MS * (values.length - 1);
+        let currentSegments: Array<Segment> = [];
+        const animate = () => {
+            const now = performance.now();
+            currentSegments = calculateSegments(initialValuesRef.current, values, now - start, reverse);
+            if (shouldAnimate && now < end) {
+                raf = requestAnimationFrame(animate); // request next frame
+            } else {
+                currentSegments = calculateSegments(initialValuesRef.current, values, end - start, reverse); // set the final values
+                initialValuesRef.current = values;
+            }
+            setSegments(currentSegments);
+        };
+        animate();
+        return () => {
+            cancelAnimationFrame(raf);
+            // animation was cancelled, snapshot current values
+            initialValuesRef.current = currentSegments.map((s) => s.end - s.start);
+        };
+    }, [radius, values, type, reverse, shouldAnimate]);
+
+    const getX = React.useCallback(
+        (value: number) =>
+            type === TYPE_LINEAR
+                ? lineCapRadius + maxValue * value
+                : CENTER_X - radius * Math.cos(value * maxValue),
+        [lineCapRadius, maxValue, radius, type]
+    );
+
+    const getY = React.useCallback(
+        (value: number) =>
+            type === TYPE_LINEAR ? strokeWidth / 2 : CENTER_Y - radius * Math.sin(value * maxValue),
+        [maxValue, radius, strokeWidth, type]
+    );
+
+    const getColor = (index: number) => segmentColors[index % segmentColors.length];
+
+    const totalPercent = Math.round((lastSegment?.end || 0) * 100);
+
+    const valueText =
+        t(meterTotalLabel, values.length, totalPercent) +
+        ' ' +
+        values.map((v, i) => `${t(meterSectionLabel, i + 1, Math.round(v * 100))}`).join('. ');
+
+    const extraStyle = React.useMemo(() => {
+        if (type === TYPE_LINEAR) {
+            return {display: 'flex'};
+        }
+        const COS_45 = 0.707107;
+        const sizeFactor = (width / 2 - STROKE_WIDTH_PX) * COS_45;
+        return {
+            display: 'flex',
+            marginTop:
+                -1 * (type === TYPE_ANGULAR ? sizeFactor + STROKE_WIDTH_PX / 2 : sizeFactor + width / 2),
+            width: sizeFactor * 2,
+            minHeight: type === TYPE_ANGULAR ? sizeFactor + STROKE_WIDTH_PX / 2 : sizeFactor * 2,
+            marginLeft: 'auto',
+            marginRight: 'auto',
+        };
+    }, [width, type]);
+
+    return (
+        <div
+            ref={containerRef}
+            style={{width: widthProp, minHeight: height}}
+            role="meter"
+            aria-label={ariaLabel || (ariaLabelledBy ? undefined : valueText)}
+            aria-labelledby={ariaLabelledBy}
+            aria-valuenow={totalPercent}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-live="polite"
+            aria-valuetext={valueText}
+            aria-hidden={ariaHidden}
+            {...getPrefixedDataAttributes(dataAttributes, 'Meter')}
+        >
+            <svg
+                viewBox={`0 0 ${VIEW_BOX_WIDTH} ${viewBoxHeight}`}
+                style={{
+                    width,
+                    height,
+                    display: 'block',
+                    transform: `rotate(${type === TYPE_CIRCULAR ? '90deg' : 0})`,
+                }}
+                // always hidden
+                aria-hidden="true"
+            >
+                <defs>
+                    {hasRoundLineCaps && (
+                        <>
+                            <marker
+                                id={markerCurrentId}
+                                viewBox="0 0 10 10"
+                                markerWidth={1}
+                                markerHeight={1}
+                                orient="auto"
+                                refX={5}
+                                refY={5}
+                            >
+                                <rect x={4} y={0} width={2} height={10} fill={getColor(lastNonZeroIndex)} />
+                                <path
+                                    d={createPath({x1: 5, y1: 0, x2: 5, y2: 10, radius: 5})}
+                                    fill={getColor(lastNonZeroIndex)}
+                                />
+                            </marker>
+                            <marker
+                                id={markerStartId}
+                                viewBox="0 0 10 10"
+                                markerWidth={1}
+                                markerHeight={1}
+                                orient="auto"
+                                refX={5}
+                                refY={5}
+                            >
+                                <rect x={4} y={0} width={2} height={10} fill={getColor(firstNonZeroIndex)} />
+                                <path
+                                    d={createPath({x1: 5, y1: 0, x2: 5, y2: 10, radius: 5, clockwise: 0})}
+                                    fill={getColor(firstNonZeroIndex)}
+                                />
+                            </marker>
+                        </>
+                    )}
+                    <mask id={maskBarTrackId} maskUnits="userSpaceOnUse">
+                        <rect x={0} y={0} width={VIEW_BOX_WIDTH} height={viewBoxHeight} fill="white" />
+                        {firstNonZeroIndex >= 0 && lastSegment && (
+                            <>
+                                <path
+                                    // this path is used to mask the trackbar
+                                    stroke="black"
+                                    fill="none"
+                                    strokeWidth={strokeWidth + separation * 2}
+                                    strokeLinecap={
+                                        type === TYPE_CIRCULAR || !hasRoundLineCaps ? 'butt' : 'round'
+                                    }
+                                    d={createPath({
+                                        x1: getX(0),
+                                        y1: getY(0),
+                                        x2: getX(
+                                            clamp(
+                                                lastSegment.end + (hasRoundLineCaps ? 0 : segmentSeparation),
+                                                0,
+                                                1 - SMALL_VALUE_THRESHOLD
+                                            )
+                                        ),
+                                        y2: getY(
+                                            clamp(
+                                                lastSegment.end + (hasRoundLineCaps ? 0 : segmentSeparation),
+                                                0,
+                                                1 - SMALL_VALUE_THRESHOLD
+                                            )
+                                        ),
+                                        radius,
+                                        largeArchFlag: type === TYPE_CIRCULAR ? lastSegment.end >= 0.5 : 0,
+                                    })}
+                                />
+                                {type === TYPE_CIRCULAR && hasRoundLineCaps && (
+                                    // the circular type has butt line caps, so we need to add a circle to the end
+                                    <circle
+                                        cx={getX(lastSegment.end)}
+                                        cy={getY(lastSegment.end)}
+                                        r={strokeWidth / 2 + separation}
+                                        fill="black"
+                                    />
+                                )}
+                                {type === TYPE_CIRCULAR && lastSegment.end <= 0.5 && (
+                                    // small patch to remove the circular mask when the last segment is too near to the start
+                                    <rect
+                                        x={0}
+                                        y={CENTER_Y + separation}
+                                        width={strokeWidth + separation * 2}
+                                        height={strokeWidth / 2 + separation}
+                                        fill="white"
+                                    />
+                                )}
+                            </>
+                        )}
+                    </mask>
+                    {type === TYPE_CIRCULAR && (
+                        <mask id={maskLastSegmentId} maskUnits="userSpaceOnUse">
+                            <rect x={0} y={0} width={VIEW_BOX_WIDTH} height={viewBoxHeight} fill="white" />
+                            <path
+                                stroke="black"
+                                strokeWidth={strokeWidth}
+                                fill="none"
+                                d={createPath({
+                                    x1: getX(1 - segmentSeparation),
+                                    y1: getY(1 - segmentSeparation),
+                                    x2: getX(1),
+                                    y2: getY(1),
+                                    radius,
+                                })}
+                            />
+                        </mask>
+                    )}
+                </defs>
+
+                <path
+                    stroke={trackbarColor}
+                    opacity={isOverMedia ? 0.5 : 1}
+                    fill="none"
+                    strokeWidth={strokeWidth}
+                    strokeLinecap={type === TYPE_CIRCULAR || !hasRoundLineCaps ? 'butt' : 'round'}
+                    d={createPath({
+                        x1: getX(0),
+                        y1: getY(0),
+                        x2: getX(1 - (type === TYPE_CIRCULAR ? segmentSeparation : 0)),
+                        y2: getY(1 - (type === TYPE_CIRCULAR ? segmentSeparation : 0)),
+                        largeArchFlag: 1,
+                        radius,
+                    })}
+                    mask={`url("#${maskBarTrackId}")`}
+                />
+
+                {firstNonZeroIndex >= 0 &&
+                    [...segments].reverse().map((segment, reversedIndex) => {
+                        // note that the list is reversed, so the first segment is drawn last
+                        const index = segments.length - 1 - reversedIndex;
+                        const color = getColor(index);
+                        const isFirst = index === firstNonZeroIndex;
+                        const isLast = index === lastNonZeroIndex;
+                        const start =
+                            isFirst || segment.end - segment.start < segmentSeparation
+                                ? segment.start
+                                : segment.start + segmentSeparation / 2;
+                        const end =
+                            isLast || segment.end - segment.start < segmentSeparation
+                                ? segment.end
+                                : segment.end - segmentSeparation / 2;
+
+                        if (end - start < SMALL_VALUE_THRESHOLD) {
+                            return null;
+                        }
+
+                        const shouldIncludeStartMarker = isFirst && type !== TYPE_CIRCULAR;
+                        return (
+                            <path
+                                key={reversedIndex}
+                                stroke={color}
+                                fill="none"
+                                strokeWidth={strokeWidth}
+                                strokeLinecap="butt"
+                                markerEnd={isLast ? `url(#${markerCurrentId})` : undefined}
+                                markerStart={shouldIncludeStartMarker ? `url(#${markerStartId})` : undefined}
+                                mask={
+                                    isLast && type === TYPE_CIRCULAR
+                                        ? `url("#${maskLastSegmentId}")`
+                                        : undefined
+                                }
+                                d={createPath({
+                                    x1: getX(start),
+                                    y1: getY(start),
+                                    x2: getX(end),
+                                    y2: getY(end),
+                                    largeArchFlag: type === TYPE_CIRCULAR ? end - start >= 0.5 : 0,
+                                    radius,
+                                })}
+                            />
+                        );
+                    })}
+            </svg>
+            {extra && <div style={extraStyle}>{extra}</div>}
+        </div>
+    );
+};
+
+/**
+ * This wrapper is to force a remount when some specific props change
+ */
+const Meter = (props: MeterProps): JSX.Element => {
+    return <MeterComponent {...props} key={`${props.type},${props.values.length},${props.reverse}`} />;
+};
+
+export default Meter;

package/src/modal-context-provider.tsx

@@ -0,0 +1,45 @@
+'use client';
+import * as React from 'react';
+
+type ModalState = {
+    isModalOpen: boolean;
+};
+
+const ModalStateContext = React.createContext<ModalState>({isModalOpen: false});
+const ModalStateSetterContext = React.createContext<(newState: Partial<ModalState>) => void>(() => {});
+
+const ModalContextProvider = ({children}: {children: React.ReactNode}): JSX.Element => {
+    const [modalState, setModalState] = React.useState<ModalState>({isModalOpen: false});
+
+    const updateModalState = React.useCallback((newState: Partial<ModalState>) => {
+        setModalState((prevState) => ({
+            ...prevState,
+            ...newState,
+        }));
+    }, []);
+
+    return (
+        <ModalStateContext.Provider value={modalState}>
+            <ModalStateSetterContext.Provider value={updateModalState}>
+                {children}
+            </ModalStateSetterContext.Provider>
+        </ModalStateContext.Provider>
+    );
+};
+
+export const useSetModalState = (): ((newModalState: Partial<ModalState>) => void) =>
+    React.useContext(ModalStateSetterContext);
+
+export const useSetModalStateEffect = (): void => {
+    const setModalState = useSetModalState();
+    React.useEffect(() => {
+        setModalState({isModalOpen: true});
+        return () => {
+            setModalState({isModalOpen: false});
+        };
+    }, [setModalState]);
+};
+
+export const useModalState = (): ModalState => React.useContext(ModalStateContext);
+
+export default ModalContextProvider;

package/src/month-field.tsx

@@ -0,0 +1,124 @@
+'use client';
+import * as React from 'react';
+import {useFieldProps} from './form-context';
+import {TextFieldBaseAutosuggest} from './text-field-base';
+import {isInputTypeSupported} from './utils/dom';
+import {isServerSide} from './utils/environment';
+import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
+import {getLocalYearMonthString} from './utils/time';
+import {useTheme} from './hooks';
+import * as dateStyles from './date-field.css';
+import {iconSize} from './icon-button.css';
+import * as tokens from './text-tokens';
+
+import type {CommonFormFieldProps} from './text-field-base';
+
+export interface DateFieldProps extends CommonFormFieldProps {
+    onChangeValue?: (value: string, rawValue: string) => void;
+    min?: Date;
+    max?: Date;
+}
+
+const ReactDateTimePicker = React.lazy(
+    () => import(/* webpackChunkName: "date-time-picker" */ './date-time-picker')
+);
+
+const DateField = ({
+    disabled,
+    error,
+    helperText,
+    name,
+    label,
+    optional,
+    validate: validateProp,
+    validateOnBlurInsideForm,
+    onChange,
+    onChangeValue: onChangeValueProp,
+    onBlur,
+    value,
+    defaultValue,
+    min,
+    max,
+    dataAttributes,
+    ...rest
+}: DateFieldProps): JSX.Element => {
+    const processValue = (value: string) => value;
+    const hasNativePicker = React.useMemo(() => isInputTypeSupported('month'), []);
+    const {texts, t} = useTheme();
+
+    const isInRange = (value: string): boolean => {
+        if (min && value && value < getLocalYearMonthString(min)) {
+            return false;
+        }
+        if (max && value && value > getLocalYearMonthString(max)) {
+            return false;
+        }
+        return true;
+    };
+
+    const validate = (value: string, rawValue: string) => {
+        if (!isInRange(value)) {
+            return texts.formDateOutOfRangeError || t(tokens.formDateOutOfRangeError);
+        }
+        return validateProp?.(value, rawValue);
+    };
+
+    const onChangeValue = (value: string, rawValue: string) => {
+        if (isInRange(value)) {
+            onChangeValueProp?.(value, rawValue);
+        }
+        // if not in range, onChangeValue is not called
+    };
+
+    const fieldProps = useFieldProps({
+        name,
+        label,
+        value,
+        defaultValue,
+        processValue,
+        helperText,
+        optional,
+        error,
+        disabled,
+        onBlur,
+        validate,
+        validateOnBlurInsideForm,
+        onChange,
+        onChangeValue,
+    });
+
+    const nativePicker = (
+        <TextFieldBaseAutosuggest
+            {...rest}
+            {...fieldProps}
+            min={min ? getLocalYearMonthString(min) : undefined}
+            max={max ? getLocalYearMonthString(max) : undefined}
+            type="month"
+            endIconOverlay={
+                <div className={dateStyles.iconContainer} data-testid="endIcon">
+                    <IconCalendarRegular size={iconSize.small} />
+                </div>
+            }
+            dataAttributes={{'component-name': 'MonthField', testid: 'MonthField', ...dataAttributes}}
+        />
+    );
+
+    if (hasNativePicker || isServerSide()) {
+        return nativePicker;
+    }
+
+    return (
+        <React.Suspense fallback={nativePicker}>
+            <ReactDateTimePicker
+                {...rest}
+                {...fieldProps}
+                optional={optional}
+                isValidDate={(currentDate) => isInRange(getLocalYearMonthString(currentDate.toDate()))}
+                mode="year-month"
+                dataAttributes={{'component-name': 'MonthField', testid: 'MonthField', ...dataAttributes}}
+            />
+        </React.Suspense>
+    );
+};
+
+export default DateField;