@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/date-field.css.ts

@@ -1,14 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {iconSize} from './icon-button.css';
-import {fieldRightPadding, iconButtonSize} from './text-field-base.css';
-
-export const iconContainer = style({
-    position: 'absolute',
-    pointerEvents: 'none',
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    right: `calc(${fieldRightPadding}px + (${iconButtonSize} - ${iconSize.default}) / 2)`,
-    marginRight: -12,
-});

package/src/date-field.tsx

@@ -1,130 +0,0 @@
-'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 {getLocalDateString} from './utils/time';
-import {useTheme} from './hooks';
-import {isFirefox} from './utils/platform';
-import * as styles 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(() => {
-        if (isFirefox()) {
-            // disabled in firefox because it shows a close button over the icon and can't be styled
-            return false;
-        }
-        return isInputTypeSupported('date');
-    }, []);
-    const {texts, t} = useTheme();
-
-    const isInRange = (value: string): boolean => {
-        if (min && value && value < getLocalDateString(min)) {
-            return false;
-        }
-        if (max && value && value > getLocalDateString(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 ? getLocalDateString(min) : undefined}
-            max={max ? getLocalDateString(max) : undefined}
-            type="date"
-            endIconOverlay={
-                <div className={styles.iconContainer} data-testid="endIcon">
-                    <IconCalendarRegular size={iconSize.small} />
-                </div>
-            }
-            dataAttributes={{'component-name': 'DateField', testid: 'DateField', ...dataAttributes}}
-        />
-    );
-
-    if (hasNativePicker || isServerSide()) {
-        return nativePicker;
-    }
-
-    return (
-        <React.Suspense fallback={nativePicker}>
-            <ReactDateTimePicker
-                {...rest}
-                {...fieldProps}
-                optional={optional}
-                isValidDate={(currentDate) => isInRange(getLocalDateString(currentDate.toDate()))}
-                dataAttributes={{'component-name': 'DateField', testid: 'DateField', ...dataAttributes}}
-            />
-        </React.Suspense>
-    );
-};
-
-export default DateField;

package/src/date-time-field.tsx

@@ -1,141 +0,0 @@
-'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 {getLocalDateTimeString} from './utils/time';
-import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
-import {isFirefox} from './utils/platform';
-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 FormDateField = ({
-    disabled,
-    error,
-    helperText,
-    name,
-    label,
-    optional,
-    validate: validateProp,
-    validateOnBlurInsideForm,
-    onChange,
-    onChangeValue: onChangeValueProp,
-    onBlur,
-    value,
-    defaultValue,
-    min,
-    /**
-     * When typing a datetime value into the input field (inside a test for example), some browsers like Chrome
-     * force the year to have exactly 6 digits. In order to prevent this, in case max value was not provided we
-     * set it so that it only accepts datetime values with years having up to 4 digits.
-     */
-    max = new Date('9999-12-31T23:59'),
-    dataAttributes,
-    ...rest
-}: DateFieldProps): JSX.Element => {
-    const hasNativePicker = React.useMemo(() => {
-        if (isFirefox()) {
-            // disabled for firefox because the picker has no option to select time
-            return false;
-        }
-        return isInputTypeSupported('datetime-local');
-    }, []);
-    const processValue = (value: string) => (hasNativePicker ? value : value.replace(/\s/, 'T'));
-    const {texts, t} = useTheme();
-
-    const isInRange = (value: string): boolean => {
-        const isoValue = processValue(value);
-        if (min && isoValue && isoValue < getLocalDateTimeString(min)) {
-            return false;
-        }
-        if (max && isoValue && isoValue > getLocalDateTimeString(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 ? getLocalDateTimeString(min) : undefined}
-            max={max ? getLocalDateTimeString(max) : undefined}
-            type="datetime-local"
-            endIconOverlay={
-                <div className={dateStyles.iconContainer} data-testid="endIcon">
-                    <IconCalendarRegular size={iconSize.small} />
-                </div>
-            }
-            dataAttributes={{'component-name': 'DateTimeField', testid: 'DateTimeField', ...dataAttributes}}
-        />
-    );
-
-    if (hasNativePicker || isServerSide()) {
-        return nativePicker;
-    }
-
-    return (
-        <React.Suspense fallback={nativePicker}>
-            <ReactDateTimePicker
-                {...rest}
-                {...fieldProps}
-                optional={optional}
-                withTime
-                isValidDate={(currentDate) => isInRange(getLocalDateTimeString(currentDate.toDate()))}
-                dataAttributes={{
-                    'component-name': 'DateTimeField',
-                    testid: 'DateTimeField',
-                    ...dataAttributes,
-                }}
-            />
-        </React.Suspense>
-    );
-};
-
-export default FormDateField;

package/src/date-time-picker.css.ts

@@ -1,126 +0,0 @@
-import {style, globalStyle} from '@vanilla-extract/css';
-
-/* !
- * https://github.com/arqex/react-datetime
- */
-
-export const reactDatePicker = style({});
-
-globalStyle(`${reactDatePicker} td, ${reactDatePicker} th`, {verticalAlign: 'middle'});
-
-globalStyle(`${reactDatePicker} .rdt`, {position: 'relative', userSelect: 'none'});
-
-globalStyle(`${reactDatePicker} .rdtPicker`, {
-    display: 'none',
-    position: 'absolute',
-    minWidth: 250,
-    padding: 4,
-    marginTop: 1,
-    zIndex: '99999 !important',
-    background: '#fff',
-    boxShadow: '0 1px 3px rgba(0,0,0,.1)',
-    border: '1px solid #f9f9f9',
-});
-globalStyle(`${reactDatePicker} .rdtOpen .rdtPicker`, {
-    display: 'block',
-});
-globalStyle(`${reactDatePicker} .rdtStatic .rdtPicker`, {boxShadow: 'none', position: 'static'});
-globalStyle(`${reactDatePicker} .rdtPicker .rdtTimeToggle`, {textAlign: 'center'});
-globalStyle(`${reactDatePicker} .rdtPicker table`, {width: '100%', margin: 0});
-globalStyle(`${reactDatePicker} .rdtPicker td`, {textAlign: 'center', height: 28});
-globalStyle(`${reactDatePicker} .rdtPicker th`, {textAlign: 'center', height: 28});
-globalStyle(`${reactDatePicker} .rdtPicker td`, {cursor: 'pointer'});
-globalStyle(
-    `${reactDatePicker} .rdtPicker td.rdtDay:hover, ${reactDatePicker} .rdtPicker td.rdtHour:hover, ${reactDatePicker} .rdtPicker td.rdtMinute:hover, ${reactDatePicker} .rdtPicker td.rdtSecond:hover, ${reactDatePicker} .rdtPicker .rdtTimeToggle:hover`,
-    {
-        background: '#eeeeee',
-        cursor: 'pointer',
-    }
-);
-globalStyle(`${reactDatePicker} .rdtPicker td.rdtOld, ${reactDatePicker} .rdtPicker td.rdtNew`, {
-    color: '#999999',
-});
-globalStyle(`${reactDatePicker} .rdtPicker td.rdtToday`, {position: 'relative'});
-globalStyle(`${reactDatePicker} .rdtPicker td.rdtToday:before`, {
-    content: '""',
-    display: 'inline-block',
-    borderLeft: '7px solid transparent',
-    borderBottom: '7px solid #428bca',
-    borderTopColor: 'rgba(0, 0, 0, 0.2)',
-    position: 'absolute',
-    bottom: 4,
-    right: 4,
-});
-
-globalStyle(`${reactDatePicker} .rdtPicker td.rdtActive, ${reactDatePicker} .rdtPicker td.rdtActive:hover`, {
-    backgroundColor: '#428bca',
-    color: '#fff',
-    textShadow: '0 -1px 0 rgba(0, 0, 0, 0.25)',
-});
-globalStyle(`${reactDatePicker} .rdtPicker td.rdtActive.rdtToday:before`, {borderBottomColor: '#fff'});
-globalStyle(
-    `${reactDatePicker} .rdtPicker td.rdtDisabled, ${reactDatePicker} .rdtPicker td.rdtDisabled:hover`,
-    {background: 'none', color: '#999999', cursor: 'default'}
-);
-globalStyle(`${reactDatePicker} .rdtPicker td span.rdtOld`, {color: '#999999'});
-globalStyle(
-    `${reactDatePicker} .rdtPicker td span.rdtDisabled, ${reactDatePicker} .rdtPicker td span.rdtDisabled`,
-    {
-        background: 'none',
-        color: '#999999',
-        cursor: 'default',
-    }
-);
-globalStyle(`${reactDatePicker} .rdtPicker th`, {borderBottom: '1px solid #f9f9f9', fontWeight: 'bold'});
-globalStyle(`${reactDatePicker} .rdtPicker .dow`, {
-    width: '14.2857%',
-    borderBottom: 'none',
-    cursor: 'default',
-});
-globalStyle(`${reactDatePicker} .rdtPicker th.rdtSwitch`, {width: 100});
-globalStyle(`${reactDatePicker} .rdtPicker th.rdtNext, ${reactDatePicker} .rdtPicker th.rdtPrev`, {
-    fontSize: 21,
-    verticalAlign: 'top',
-});
-globalStyle(`${reactDatePicker} .rdtPrev span, ${reactDatePicker} .rdtNext span`, {
-    display: 'block',
-    userSelect: 'none',
-});
-globalStyle(
-    `${reactDatePicker} .rdtPicker th.rdtDisabled, ${reactDatePicker} .rdtPicker th.rdtDisabled:hover`,
-    {
-        background: 'none',
-        color: '#999999',
-        cursor: 'default',
-    }
-);
-globalStyle(`${reactDatePicker} .rdtPicker thead tr:first-of-type th`, {cursor: 'pointer'});
-globalStyle(`${reactDatePicker} .rdtPicker thead tr:first-of-type th:hover`, {background: '#eeeeee'});
-globalStyle(`${reactDatePicker} .rdtPicker tfoot`, {borderTop: '1px solid #f9f9f9'});
-globalStyle(`${reactDatePicker} .rdtPicker button`, {border: 'none', background: 'none', cursor: 'pointer'});
-globalStyle(`${reactDatePicker} .rdtPicker button:hover`, {backgroundColor: '#eee'});
-globalStyle(`${reactDatePicker} .rdtPicker thead button`, {width: '100%', height: '100%'});
-globalStyle(`${reactDatePicker} td.rdtMonth, ${reactDatePicker} td.rdtYear`, {
-    height: 50,
-    width: '25%',
-    cursor: 'pointer',
-});
-globalStyle(`${reactDatePicker} td.rdtMonth:hover, ${reactDatePicker} td.rdtYear:hover`, {
-    background: '#eee',
-});
-globalStyle(`${reactDatePicker} .rdtCounters`, {display: 'inline-block'});
-globalStyle(`${reactDatePicker} .rdtCounters > div`, {float: 'left'});
-globalStyle(`${reactDatePicker} .rdtCounter`, {height: 100, width: 40});
-globalStyle(`${reactDatePicker} .rdtCounterSeparator`, {lineHeight: '100px'});
-globalStyle(`${reactDatePicker} .rdtCounter .rdtBtn`, {
-    height: '40%',
-    lineHeight: '40px',
-    cursor: 'pointer',
-    display: 'block',
-    userSelect: 'none',
-});
-globalStyle(`${reactDatePicker} .rdtCounter .rdtBtn:hover`, {background: '#eee'});
-globalStyle(`${reactDatePicker} .rdtCounter .rdtCount`, {height: '20%', fontSize: '1.2em'});
-globalStyle(`${reactDatePicker} .rdtMilli`, {verticalAlign: 'middle', paddingLeft: 8, width: 48});
-globalStyle(`${reactDatePicker} .rdtMilli input`, {width: '100%', fontSize: '1.2em', marginTop: 37});
-globalStyle(`${reactDatePicker} .rdtTime td`, {cursor: 'default'});

package/src/date-time-picker.tsx

@@ -1,188 +0,0 @@
-/**
- * Do not use this component!
- * Use DateField or FormDateTimeField
- *
- * This component is a fallback for browsers that don't support datetime-local or date inputs
- */
-
-'use client';
-import * as React from 'react';
-import {FieldEndIcon, TextFieldBaseAutosuggest} from './text-field-base';
-import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
-import Datetime from 'react-datetime';
-import Overlay from './overlay';
-import {DEFAULT_WIDTH} from './text-field-components.css';
-import {cancelEvent, createChangeEvent} from './utils/dom';
-import {useElementDimensions, useTheme} from './hooks';
-import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
-import * as styles from './date-time-picker.css';
-import {vars} from './skins/skin-contract.css';
-import 'moment/locale/es';
-import 'moment/locale/de';
-import 'moment/locale/pt-br';
-import 'moment/locale/en-gb';
-import * as tokens from './text-tokens';
-
-import type {CommonFormFieldProps} from './text-field-base';
-import type Moment from 'moment';
-import type {Locale} from './utils/locale';
-
-export interface DateTimePickerProps extends CommonFormFieldProps {
-    inputRef: (field: HTMLInputElement | null) => void;
-    isValidDate?: (currentDate: Moment.Moment, selectedDate: Moment.Moment) => boolean;
-    withTime?: boolean;
-    mode?: 'year-month';
-}
-
-const langToLocale: Record<string, string> = {
-    es: 'es', // spanish
-    ca: 'es', // catalan
-    eu: 'es', // euskera
-    gl: 'es', // gallego
-    de: 'de', // german
-    pt: 'pt-br', // portuguese
-    en: 'en-gb', // english
-};
-
-const getLocaleForMoment = (locale: Locale) => {
-    const lang = locale.toLocaleLowerCase().split('-')[0];
-    return langToLocale[lang] || 'en-gb';
-};
-
-const DateTimePicker = ({
-    withTime,
-    mode,
-    isValidDate,
-    optional,
-    ...rest
-}: DateTimePickerProps): JSX.Element => {
-    const [showPicker, realSetShowPicker] = React.useState(false);
-    const {
-        texts,
-        i18n: {locale},
-        t,
-    } = useTheme();
-    const fieldRef = React.useRef<HTMLInputElement | null>(null);
-    const {height: pickerContainerHeight, ref: pickerContainerRef} = useElementDimensions();
-
-    const setShowPicker = (show: boolean) => {
-        if (!rest.disabled) {
-            realSetShowPicker(show);
-        }
-    };
-
-    const getPickerContainerStyles = (): React.CSSProperties => {
-        const {top = 0, bottom = 0, left = 0} = fieldRef.current?.getBoundingClientRect() || {};
-        // picker has different heights for month, year or day selectors
-        // this hardcoded value is the date selector height + a little threshold
-        const maxPickerHeight = 260;
-        const openToBottom = maxPickerHeight + bottom < window.innerHeight;
-
-        return {
-            width: DEFAULT_WIDTH,
-            top: openToBottom ? bottom : top - pickerContainerHeight,
-            left,
-            position: 'absolute',
-            borderRadius: vars.borderRadii.input,
-            overflow: 'hidden',
-            boxShadow:
-                '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
-        };
-    };
-
-    const getValue = (): Date | undefined => {
-        const value = fieldRef.current?.value;
-        return value ? new Date(value) : undefined;
-    };
-
-    const formatMoment = (moment: Moment.Moment): string => {
-        if (withTime) {
-            return moment.format('yyyy-MM-DD HH:mm');
-        }
-        if (mode === 'year-month') {
-            return moment.format('yyyy-MM');
-        }
-        return moment.format('yyyy-MM-DD');
-    };
-
-    const setValue = (moment: string | Moment.Moment) => {
-        const value = typeof moment === 'string' ? moment : formatMoment(moment);
-        if (fieldRef.current) {
-            fieldRef.current.focus();
-            rest.onChange?.(createChangeEvent(fieldRef.current, value));
-        }
-    };
-
-    const renderEndIcon = () => {
-        if (getValue() && optional) {
-            return (
-                <FieldEndIcon
-                    Icon={IconCloseRegular}
-                    aria-label={texts.clearButton || t(tokens.clearButton)}
-                    hasBackgroundColor={false}
-                    onPress={() => setValue('')}
-                />
-            );
-        }
-        return (
-            <FieldEndIcon
-                Icon={IconCalendarRegular}
-                aria-label=""
-                disabled={rest.disabled}
-                hasBackgroundColor={false}
-                onPress={() => setShowPicker(!showPicker)}
-            />
-        );
-    };
-
-    return (
-        <>
-            <TextFieldBaseAutosuggest
-                {...rest}
-                style={{cursor: 'pointer'}}
-                required={!optional}
-                type="text"
-                autoComplete="off"
-                shrinkLabel={!!getValue()}
-                endIcon={renderEndIcon()}
-                inputRef={(e: HTMLInputElement) => {
-                    rest?.inputRef?.(e);
-                    fieldRef.current = e;
-                }}
-                readOnly
-                onKeyDown={() => setShowPicker(true)}
-                onClick={() => {
-                    setShowPicker(true);
-                }}
-            />
-            {showPicker && (
-                <Overlay
-                    onPress={(e) => {
-                        cancelEvent(e);
-                        setShowPicker(false);
-                    }}
-                    disableScroll
-                >
-                    <div
-                        ref={pickerContainerRef}
-                        style={getPickerContainerStyles()}
-                        className={styles.reactDatePicker}
-                    >
-                        <Datetime
-                            initialViewMode={mode === 'year-month' ? 'months' : undefined}
-                            dateFormat={mode === 'year-month' ? 'YYYY-MM' : undefined}
-                            timeFormat={withTime ? 'HH:mm' : false}
-                            initialValue={getValue()}
-                            locale={getLocaleForMoment(locale)}
-                            input={false}
-                            onChange={setValue}
-                            isValidDate={isValidDate}
-                        />
-                    </div>
-                </Overlay>
-            )}
-        </>
-    );
-};
-
-export default DateTimePicker;