@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/decimal-field.tsx

@@ -1,160 +0,0 @@
-'use client';
-import * as React from 'react';
-import {useFieldProps} from './form-context';
-import {useTheme} from './hooks';
-import {TextFieldBaseAutosuggest} from './text-field-base';
-import {createChangeEvent} from './utils/dom';
-import {useRifm} from 'rifm';
-import {combineRefs} from './utils/common';
-
-import type {Locale} from './utils/locale';
-import type {CommonFormFieldProps} from './text-field-base';
-
-const getLocalDecimalChar = (locale: Locale): string => {
-    try {
-        return (1.1).toLocaleString(locale.replace('_', '-'))[1];
-    } catch (e) {
-        return '.';
-    }
-};
-
-const format = (value: any, maxDecimals: number) => {
-    // do not make the localDecimalChar replacement here. Instead, keep the one the user typed.
-    // Make that replacement in `replace` prost-processor. It is what rifm lib expects.
-    const sanitized = String(value ?? '').replace(/[^.,\d]/g, ''); // remove non digits or decimal separator chars;
-    const firstSeparator = /[.,]/.exec(sanitized);
-    const parts = sanitized.split(/[.,]/);
-
-    if (parts.length === 0) {
-        // empty
-        return '';
-    }
-
-    if (firstSeparator && maxDecimals > 0) {
-        // value includes one or more decimal separators, keep the first one
-        return parts.shift() + firstSeparator[0] + parts.join('').slice(0, maxDecimals);
-    } else {
-        // no fractional part, return "as is"
-        return parts[0];
-    }
-};
-
-/**
- * typed as `any` because `React.HTMLProps<>` has no equivalent in flowtype
- * not a big problem because this component is not exported to the public API
- *
- * The correct type would be:
- *
- * type DecimalInputProps = React.HTMLProps<HTMLInputElement> & {inputRef: React.Ref<HTMLInputElement>}
- */
-type DecimalInputProps = any;
-
-export const DecimalInput = ({
-    inputRef,
-    value,
-    defaultValue,
-    onChange,
-    maxDecimals,
-    ...rest
-}: DecimalInputProps): JSX.Element => {
-    const {i18n} = useTheme();
-    const localDecimalChar = getLocalDecimalChar(i18n.locale);
-
-    const replace = (value: any) => String(value ?? '').replace(/[.,]/g, localDecimalChar); // use local decimal char
-
-    const [selfValue, setSelfValue] = React.useState(defaultValue ?? '');
-    const ref = React.useRef<HTMLInputElement | null>(null);
-
-    const isControlledByParent = typeof value !== 'undefined';
-    const controlledValue = (isControlledByParent ? value : selfValue) as string;
-
-    const handleChangeValue = React.useCallback(
-        (newFormattedValue: string) => {
-            if (!isControlledByParent) {
-                setSelfValue(newFormattedValue);
-            }
-            if (ref.current) {
-                onChange?.(createChangeEvent(ref.current, newFormattedValue));
-            }
-        },
-        [isControlledByParent, onChange]
-    );
-
-    const rifm = useRifm({
-        format: (value) => format(value, maxDecimals),
-        replace,
-        value: controlledValue,
-        onChange: handleChangeValue,
-        accept: /[\d.,]+/g,
-    });
-
-    return (
-        <input
-            {...rest}
-            type="text"
-            inputMode="decimal" // shows decimal keypad in Chrome for Android
-            // shows regular keypad in iOS < 12.2 (there's no way to show a decimal keypad in those versions)
-            // https://bugs.webkit.org/show_bug.cgi?id=183621
-            value={rifm.value}
-            onChange={rifm.onChange}
-            ref={combineRefs(inputRef, ref)}
-        />
-    );
-};
-
-export interface DecimalFieldProps extends CommonFormFieldProps {
-    onChangeValue?: (value: string, rawValue: string) => void;
-    prefix?: React.ReactNode;
-    /** defaults to Infinity */
-    maxDecimals?: number;
-}
-
-const DecimalField = ({
-    disabled,
-    error,
-    helperText,
-    name,
-    label,
-    optional,
-    validate,
-    validateOnBlurInsideForm,
-    onChange,
-    onChangeValue,
-    onBlur,
-    value,
-    defaultValue,
-    maxDecimals = Infinity,
-    dataAttributes,
-    ...rest
-}: DecimalFieldProps): JSX.Element => {
-    const processValue = (value: string) => value.trim();
-
-    const fieldProps = useFieldProps({
-        name,
-        label,
-        value,
-        defaultValue,
-        processValue,
-        helperText,
-        optional,
-        error,
-        disabled,
-        onBlur,
-        validate,
-        validateOnBlurInsideForm,
-        onChange,
-        onChangeValue,
-    });
-
-    return (
-        <TextFieldBaseAutosuggest
-            {...rest}
-            {...fieldProps}
-            inputComponent={DecimalInput}
-            inputProps={{maxDecimals}}
-            dataAttributes={{'component-name': 'DecimalField', testid: 'DecimalField', ...dataAttributes}}
-        />
-    );
-};
-
-export default DecimalField;

package/src/desktop-container-type-context.tsx

@@ -1,15 +0,0 @@
-'use client';
-import * as React from 'react';
-
-export type DesktopContainerType = 'small' | 'medium' | 'large';
-
-const DesktopContainerTypeContext = React.createContext<DesktopContainerType | null>(null);
-
-export const useDesktopContainerType = (): DesktopContainerType | null =>
-    React.useContext(DesktopContainerTypeContext);
-
-export default ({children, value}: {children: React.ReactNode; value: DesktopContainerType}): JSX.Element => {
-    return (
-        <DesktopContainerTypeContext.Provider value={value}>{children}</DesktopContainerTypeContext.Provider>
-    );
-};

package/src/dialog-context.tsx

@@ -1,81 +0,0 @@
-'use client';
-import * as React from 'react';
-
-import type {AlertProps, ConfirmProps, DialogProps, ExtendedDialogProps} from './dialog';
-
-const DialogContext = React.createContext<{
-    mounted: boolean;
-    dialog: DialogProps | null;
-    setDialog: React.Dispatch<React.SetStateAction<DialogProps | null>>;
-}>({mounted: false, dialog: null, setDialog: () => {}});
-
-const ModalDialog = React.lazy(() => import(/* webpackChunkName: "dialog" */ './dialog'));
-
-const throwMissingDialogRootError = () => {
-    throw Error(
-        'Tried to show a dialog but the DialogRoot component was not mounted (missing ThemeContextProvider?)'
-    );
-};
-
-export const useDialog = (): {
-    alert: (params: AlertProps) => void;
-    confirm: (params: ConfirmProps) => void;
-    dialog: (params: ExtendedDialogProps) => void;
-} => {
-    const {dialog: currentDialog, setDialog, mounted} = React.useContext(DialogContext);
-
-    const showDialog = React.useCallback(
-        (params: DialogProps) => {
-            if (!mounted) {
-                throwMissingDialogRootError();
-            }
-            if (params && currentDialog) {
-                throw Error('Tried to show a dialog on top of another dialog');
-            }
-            setDialog({triggerEl: document.activeElement as HTMLElement, ...params});
-        },
-        [setDialog, currentDialog, mounted]
-    );
-
-    return React.useMemo(
-        () => ({
-            alert: (params: AlertProps) => showDialog({type: 'alert', ...params}),
-            confirm: (params: ConfirmProps) => showDialog({type: 'confirm', ...params}),
-            dialog: (params: ExtendedDialogProps) => showDialog({type: 'dialog', ...params}),
-        }),
-        [showDialog]
-    );
-};
-
-type DialogRootProps = {children?: React.ReactNode};
-
-export const DialogRoot = ({children}: DialogRootProps): JSX.Element => {
-    const {mounted} = React.useContext(DialogContext);
-    const [dialog, setDialog] = React.useState<DialogProps | null>(null);
-    const value = React.useMemo(() => ({mounted: true, dialog, setDialog}), [dialog, setDialog]);
-
-    // do not create a new context whith nested theme context providers
-    if (mounted) {
-        return <>{children}</>;
-    }
-
-    return (
-        <DialogContext.Provider value={value}>
-            {children}
-            {dialog && (
-                <React.Suspense fallback={null}>
-                    <ModalDialog
-                        {...dialog}
-                        onDestroy={() => {
-                            setDialog(null);
-                            // The focus doesn't work without this timeout
-                            setTimeout(() => {
-                                dialog.triggerEl?.focus?.();
-                            }, 0);
-                        }}
-                    />
-                </React.Suspense>
-            )}
-        </DialogContext.Provider>
-    );
-};

package/src/dialog.css.ts

@@ -1,155 +0,0 @@
-import {style, keyframes, styleVariants} from '@vanilla-extract/css';
-import * as mq from './media-queries.css';
-import {vars} from './skins/skin-contract.css';
-import {sprinkles} from './sprinkles.css';
-import {pxToRem} from './utils/css';
-
-export const ANIMATION_DURATION_MS = 200;
-
-const fadeIn = keyframes({
-    '0%': {opacity: 0},
-    '100%': {opacity: 1},
-});
-
-const fadeScale = keyframes({
-    '0%': {
-        opacity: 0,
-        transform: 'scale(.8)',
-    },
-    '100%': {
-        opacity: 1,
-        transform: 'scale(1)',
-    },
-});
-
-export const wrapper = style([
-    sprinkles({
-        position: 'relative',
-    }),
-]);
-
-export const modalOpacityLayer = style([
-    sprinkles({
-        position: 'fixed',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexDirection: 'column',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        background: vars.colors.backgroundOverlay,
-    }),
-    {
-        minHeight: 0,
-        minWidth: 0,
-        animation: `${fadeIn} ${ANIMATION_DURATION_MS}ms ease-in-out`,
-        transition: `opacity ${ANIMATION_DURATION_MS}ms ease-in-out`,
-    },
-]);
-
-export const closedOpactityLayer = style({opacity: 0});
-
-export const modalCloseButtonContainer = style([
-    sprinkles({
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        padding: 16,
-    }),
-    {
-        '@media': {
-            [mq.desktopOrBigger]: {
-                padding: 24,
-            },
-        },
-    },
-]);
-
-export const modalContent = style([
-    sprinkles({
-        background: vars.colors.background,
-        borderRadius: vars.borderRadii.container,
-    }),
-    {
-        animation: `${fadeScale} ${ANIMATION_DURATION_MS}ms ease-in-out`,
-        willChange: 'transform, opacity',
-        transition: `opacity ${ANIMATION_DURATION_MS}ms ease-in-out, transform ${ANIMATION_DURATION_MS}ms ease-in-out`,
-    },
-]);
-
-export const closedModalContent = style({opacity: 0, transform: 'scale(.8)'});
-
-const dialogContainer = style([
-    sprinkles({
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-    }),
-    {
-        width: 'calc(100vw - 48px)',
-        margin: 'auto',
-        maxHeight: 'calc(100vh - 32px)',
-
-        '@media': {
-            [mq.desktopOrBigger]: {
-                width: 680,
-                padding: 40,
-                maxHeight: 'calc(100vh - 64px)',
-            },
-        },
-    },
-]);
-
-export const variants = styleVariants({
-    dialog: [
-        dialogContainer,
-        sprinkles({
-            paddingTop: 40,
-            paddingBottom: 24,
-            paddingX: 24,
-        }),
-    ],
-    default: [
-        dialogContainer,
-        sprinkles({
-            padding: 24,
-        }),
-    ],
-});
-
-export const dialogContent = style([
-    sprinkles({
-        flex: 1,
-        minHeight: 0,
-    }),
-    {
-        overflowY: 'auto',
-    },
-]);
-
-export const dialogActions = style([
-    sprinkles({
-        paddingTop: 24,
-    }),
-    {
-        '@media': {
-            [mq.desktopOrBigger]: {
-                paddingTop: 32,
-            },
-        },
-    },
-]);
-
-export const iconContainer = style({
-    width: pxToRem(40),
-    height: pxToRem(40),
-
-    '@media': {
-        [mq.desktopOrBigger]: {
-            width: pxToRem(64),
-            height: pxToRem(64),
-        },
-    },
-});