@telefonica/mistica 16.60.0 → 16.62.0-beta.1

package/src/date-field.css.ts

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

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

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

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

@@ -0,0 +1,188 @@
+/**
+ * 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;