@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/switch-component.tsx

@@ -1,187 +0,0 @@
-/*
-This file is named "switch-component.tsx" instead of "switch.tsx" to workaround
-this storybook bug:
-https://github.com/storybookjs/storybook/issues/11980
-*/
-
-'use client';
-import * as React from 'react';
-import {debounce} from './utils/helpers';
-import {SPACE} from './utils/keys';
-import {useControlProps} from './form-context';
-import {Text3} from './text';
-import Inline from './inline';
-import {useTheme} from './hooks';
-import {getPrefixedDataAttributes} from './utils/dom';
-import * as styles from './switch-component.css';
-import {useThemeVariant} from './theme-variant-context';
-
-import type {DataAttributes} from './utils/types';
-
-type RenderSwitch = (renderProps: {
-    controlElement: React.ReactElement;
-    labelId: string;
-    checked: boolean;
-    disabled: boolean;
-}) => React.ReactNode;
-
-type PropsRender = {
-    name: string;
-    defaultChecked?: boolean;
-    checked?: boolean;
-    onChange?: (value: boolean) => void;
-    disabled?: boolean;
-    render: RenderSwitch;
-    children?: undefined;
-    'aria-labelledby'?: string;
-    'aria-label'?: string;
-    dataAttributes?: DataAttributes;
-};
-
-type PropsChildren = {
-    name: string;
-    defaultChecked?: boolean;
-    checked?: boolean;
-    onChange?: (value: boolean) => void;
-    disabled?: boolean;
-    children?: React.ReactNode;
-    render?: undefined;
-    'aria-labelledby'?: string;
-    'aria-label'?: string;
-    dataAttributes?: DataAttributes;
-};
-
-const Switch = (props: PropsRender | PropsChildren): JSX.Element => {
-    const {isIos, isDarkMode} = useTheme();
-    const themeVariant = useThemeVariant();
-    const reactId = React.useId();
-    const labelId = props['aria-labelledby'] || reactId;
-    const {defaultValue, value, onChange, focusableRef, disabled} = useControlProps({
-        name: props.name,
-        label: props['aria-label'],
-        value: props.checked,
-        defaultValue: props.defaultChecked,
-        onChange: props.onChange,
-        disabled: props.disabled,
-    });
-
-    const [checkedState, setCheckedState] = React.useState(!!defaultValue);
-    const isChecked = value ?? checkedState;
-
-    const notifyChange = React.useMemo(() => {
-        if (process.env.NODE_ENV === 'test') {
-            return (value: boolean) => onChange?.(value);
-        } else {
-            return debounce((value: boolean) => {
-                onChange?.(value);
-            }, 300);
-        }
-    }, [onChange]);
-
-    const handleChange = () => {
-        if (value !== undefined) {
-            onChange?.(!value);
-        } else {
-            setCheckedState(!checkedState);
-            notifyChange(!checkedState);
-        }
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent) => {
-        if (event.key === SPACE) {
-            event.preventDefault();
-            event.stopPropagation();
-            handleChange();
-        }
-    };
-
-    const barVariant = isIos
-        ? isChecked
-            ? 'checkedIos'
-            : isDarkMode
-              ? 'iosDark'
-              : 'ios'
-        : isChecked
-          ? 'checked'
-          : 'default';
-
-    const ballVariant = isIos ? (isChecked ? 'checkedIos' : 'ios') : isChecked ? 'checked' : 'default';
-
-    const switchEl = (
-        <div
-            className={
-                styles.checkboxVariants[
-                    isIos ? (disabled ? 'disabledIos' : 'ios') : disabled ? 'disabled' : 'default'
-                ]
-            }
-        >
-            <div className={styles.switchCheckboxContainerVariants[isIos ? 'ios' : 'default']}>
-                <div className={styles.switchCheckboxLabel}>
-                    <span
-                        className={
-                            themeVariant === 'brand' || themeVariant === 'media'
-                                ? styles.overBrandBarVariants[barVariant]
-                                : themeVariant === 'negative'
-                                  ? styles.overNegativeBarVariants[barVariant]
-                                  : styles.barVariants[barVariant]
-                        }
-                    />
-                    <span
-                        className={
-                            themeVariant === 'brand' || themeVariant === 'media'
-                                ? styles.overBrandBallVariants[ballVariant]
-                                : themeVariant === 'negative'
-                                  ? styles.overNegativeBallVariants[ballVariant]
-                                  : styles.ballVariants[ballVariant]
-                        }
-                    />
-                </div>
-            </div>
-        </div>
-    );
-
-    return (
-        // When the switch is disabled, it shouldn't be focusable
-        // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-        <span
-            role="switch"
-            aria-checked={value ?? checkedState}
-            onClick={(e) => {
-                e.stopPropagation();
-                if (!disabled) {
-                    handleChange();
-                }
-            }}
-            onKeyDown={disabled ? undefined : handleKeyDown}
-            tabIndex={disabled ? undefined : 0}
-            ref={focusableRef}
-            className={disabled ? styles.containerDisabled : styles.container}
-            aria-disabled={disabled}
-            aria-label={props['aria-label']}
-            aria-labelledby={props['aria-label'] ? undefined : labelId}
-            {...getPrefixedDataAttributes(props.dataAttributes, 'Switch')}
-        >
-            {props.render ? (
-                <>
-                    {props.render({
-                        controlElement: switchEl,
-                        labelId,
-                        disabled: !!disabled,
-                        checked: value ?? checkedState,
-                    })}
-                </>
-            ) : (
-                <Inline space={16} alignItems="center" className={styles.interactiveArea}>
-                    {switchEl}
-                    {props.children && (
-                        <Text3 regular as="div" id={labelId}>
-                            <span className={disabled ? styles.disabled : ''}>{props.children}</span>
-                        </Text3>
-                    )}
-                </Inline>
-            )}
-        </span>
-    );
-};
-
-export default Switch;

package/src/tab-focus.tsx

@@ -1,68 +0,0 @@
-'use client';
-import * as React from 'react';
-import {TAB} from './utils/keys';
-import {fieldFocusRing} from './text-field-components.css';
-
-const TAB_NAVIGATION_CLASS = 'mistica-tab-navigation';
-
-const css = `
-    body:not(.${TAB_NAVIGATION_CLASS}) *:focus,
-    body:not(.${TAB_NAVIGATION_CLASS}) *:active,
-    body:not(.${TAB_NAVIGATION_CLASS}) .${fieldFocusRing} {
-        outline: none;
-        -webkit-tap-highlight-color: transparent;
-    }
-`;
-
-type Props = {
-    children: React.ReactNode;
-    disabled: boolean;
-};
-
-let isMounted = false;
-
-const TabFocus = ({children, disabled}: Props): JSX.Element => {
-    React.useEffect(() => {
-        if (disabled) {
-            return;
-        }
-
-        if (isMounted) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.warn('Multiple TabFocus instances');
-            }
-            return;
-        }
-
-        isMounted = true;
-
-        const handleKeyboardEvent = (e: KeyboardEvent) => {
-            if (e.key === TAB) {
-                document.body.classList.add(TAB_NAVIGATION_CLASS);
-            } else {
-                document.body.classList.remove(TAB_NAVIGATION_CLASS);
-            }
-        };
-
-        const handleMouseEvent = () => {
-            document.body.classList.remove(TAB_NAVIGATION_CLASS);
-        };
-
-        window.addEventListener('keydown', handleKeyboardEvent);
-        window.addEventListener('mouseup', handleMouseEvent);
-        return () => {
-            isMounted = false;
-            window.removeEventListener('keydown', handleKeyboardEvent);
-            window.removeEventListener('mouseup', handleMouseEvent);
-        };
-    }, [disabled]);
-
-    return (
-        <>
-            {!disabled && <style>{css}</style>}
-            {children}
-        </>
-    );
-};
-
-export default TabFocus;

package/src/table-actions-header.tsx

@@ -1,21 +0,0 @@
-'use client';
-import * as React from 'react';
-import * as styles from './table.css';
-import ScreenReaderOnly from './screen-reader-only';
-import {useTheme} from './hooks';
-import * as tokens from './text-tokens';
-
-export const TableActionsHeader = (): React.ReactElement => {
-    const {texts, t} = useTheme();
-
-    return (
-        <th>
-            <ScreenReaderOnly>
-                {/** TODO: review text and translations (https://jira.tid.es/browse/PRODUCTDSN-2491) */}
-                <div className={styles.actionsHeaderText}>
-                    {texts.tableActionsHeaderLabel || t(tokens.tableActionsHeaderLabel)}
-                </div>
-            </ScreenReaderOnly>
-        </th>
-    );
-};

package/src/table-cell-text.tsx

@@ -1,35 +0,0 @@
-'use client';
-import * as React from 'react';
-import Text from './text';
-import {useTheme} from './hooks';
-
-type Props = {
-    children: React.ReactNode;
-    isCollapsedRowTitle?: boolean;
-};
-
-const TableCellText = ({children, isCollapsedRowTitle}: Props): JSX.Element => {
-    const {textPresets} = useTheme();
-    return (
-        <Text
-            desktopSize={textPresets.text2.size.desktop}
-            desktopLineHeight={textPresets.text2.lineHeight.desktop}
-            // Use Text4 size/lineHeight for row's title when collapsed-row mode is used
-            {...(isCollapsedRowTitle
-                ? {
-                      mobileSize: textPresets.text4.size.mobile,
-                      mobileLineHeight: textPresets.text4.lineHeight.mobile,
-                  }
-                : {
-                      mobileSize: textPresets.text2.size.mobile,
-                      mobileLineHeight: textPresets.text2.lineHeight.mobile,
-                  })}
-            as="div"
-            wordBreak={false}
-        >
-            {children}
-        </Text>
-    );
-};
-
-export default TableCellText;

package/src/table.css.ts

@@ -1,297 +0,0 @@
-import {createVar, fallbackVar, globalStyle, style, styleVariants} from '@vanilla-extract/css';
-import * as mq from './media-queries.css';
-import {vars as skinVars} from './skins/skin-contract.css';
-import {vars as responsiveLayoutVars} from './responsive-layout.css';
-
-const responsiveLayoutSideMargin = fallbackVar(responsiveLayoutVars.sideMargin, '0px');
-
-const maxHeight = createVar();
-
-export const vars = {maxHeight};
-
-export const table = style({
-    borderCollapse: 'separate',
-    borderSpacing: 0,
-    position: 'relative',
-});
-
-export const fullWidth = style({minWidth: '100%'});
-
-// In mobile, we have 2 rendering modes: horizontal scroll, or collapsed rows. In collapsed rows mode, every row is rendered as a card
-export const collapsedRowsInMobile = style({});
-
-export const hiddenHeadersInMobile = style({});
-export const hiddenHeadersInDesktop = style({});
-
-const BOXED_PADDING_Y_DESKTOP = 8;
-
-export const boxed = style({
-    padding: '0 16px',
-    paddingBottom: BOXED_PADDING_Y_DESKTOP,
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            paddingBottom: 0,
-            selectors: {
-                [`${collapsedRowsInMobile}&`]: {
-                    padding: 0,
-                },
-            },
-        },
-    },
-});
-
-const baseTextAlign = style({
-    selectors: {
-        [`${collapsedRowsInMobile} &`]: {
-            '@media': {
-                [mq.tabletOrSmaller]: {
-                    textAlign: 'initial',
-                },
-            },
-        },
-    },
-});
-
-export const cellTextAlign = styleVariants({
-    left: [baseTextAlign, {textAlign: 'left'}],
-    right: [baseTextAlign, {textAlign: 'right'}],
-    center: [baseTextAlign, {textAlign: 'center'}],
-});
-
-export const scrollContainer = style({
-    overflowY: 'auto',
-    maxHeight,
-    maxWidth: '100%',
-    width: 'fit-content',
-
-    selectors: {
-        [`${collapsedRowsInMobile}&`]: {
-            '@media': {
-                [mq.tabletOrSmaller]: {
-                    minWidth: '100%', // always render the table fullWidth in mobile
-                    // revert styles
-                    overflow: 'visible',
-                    maxHeight: 'none',
-                    maxWidth: 'none',
-                    width: 'auto',
-                },
-            },
-        },
-    },
-});
-
-export const scrollOverResponsiveLayout = style({
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            display: 'flex',
-            boxSizing: 'content-box', // because we need the padding to be included in the width (we need width: fit-content + paddings)
-            margin: `0 calc(${responsiveLayoutSideMargin} * -1)`,
-            padding: `0 ${responsiveLayoutSideMargin}`,
-        },
-    },
-});
-
-export const verticalAlign = styleVariants({
-    top: {verticalAlign: 'top'},
-    middle: {verticalAlign: 'middle'},
-});
-
-export const actionsHeaderText = style({
-    position: 'absolute',
-    top: -9999,
-    left: -9999,
-});
-
-export const actionsTableCell = style({});
-export const topActions = style({});
-
-// we can only apply sticky head to boxed tables, because non-boxed tables don't have a background
-globalStyle(`${boxed} thead`, {
-    position: 'sticky',
-    top: 0,
-    background: skinVars.colors.backgroundContainer,
-    // render on top of the table rows
-    zIndex: 1,
-});
-
-const ROW_MIN_HEIGHT = 56;
-
-globalStyle(`${table} th, ${table} td`, {
-    borderBottom: `1px solid ${skinVars.colors.divider}`,
-    padding: '16px 12px',
-    height: ROW_MIN_HEIGHT, // height behaves like a min-height in table layout
-});
-
-globalStyle(`${boxed} thead th`, {
-    '@media': {
-        [mq.desktopOrBigger]: {
-            paddingTop: 16 + BOXED_PADDING_Y_DESKTOP,
-        },
-    },
-});
-
-globalStyle(`${table} tbody tr:last-child td, ${table} tbody tr:last-child th`, {
-    borderBottom: 'none',
-});
-
-globalStyle(
-    `${collapsedRowsInMobile}, ${collapsedRowsInMobile} thead, ${collapsedRowsInMobile} tbody, ${collapsedRowsInMobile} th, ${collapsedRowsInMobile} td, ${collapsedRowsInMobile} tr`,
-    {
-        '@media': {
-            [mq.tabletOrSmaller]: {
-                display: 'block',
-            },
-        },
-    }
-);
-
-globalStyle(`${collapsedRowsInMobile} tr`, {
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            // Using flexbox so we can move the row's header to the top of the row
-            display: 'flex',
-            flexDirection: 'column',
-        },
-    },
-});
-
-export const collapsedRowHeaderItem = style({
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            order: -1,
-        },
-    },
-});
-
-export const mobileCellHeading = style({
-    paddingBottom: 4,
-    '@media': {
-        [mq.desktopOrBigger]: {
-            display: 'none',
-        },
-    },
-});
-
-export const collapsedRowTitle = style({
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            fontWeight: skinVars.textPresets.cardTitle.weight,
-            paddingBottom: 8,
-        },
-    },
-});
-
-globalStyle(`${collapsedRowsInMobile} tbody td, ${collapsedRowsInMobile} tbody th`, {
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            verticalAlign: 'initial',
-            border: 'none',
-            height: 'auto', // reset min-height
-            padding: '0 0 8px 0',
-        },
-        [mq.desktopOrBigger]: {
-            marginRight: 0, // remove right space occupied by actions
-        },
-    },
-});
-
-globalStyle(`${table} tbody th`, {
-    // Weight in th is bold if not specified, and we don't want this in the table's body
-    fontWeight: 'inherit',
-});
-
-export const rowFirstItem = style({});
-export const rowLastItem = style({});
-export const rowLastCollapsedItem = style({});
-
-globalStyle(`${table} ${rowFirstItem}`, {
-    paddingLeft: 0,
-});
-
-globalStyle(`${table} ${rowLastItem}`, {
-    paddingRight: 0,
-});
-
-globalStyle(`${collapsedRowsInMobile} ${rowLastCollapsedItem}`, {
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            paddingBottom: 0,
-        },
-    },
-});
-
-globalStyle(`${collapsedRowsInMobile} tbody tr`, {
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            padding: '16px 0',
-        },
-    },
-});
-
-globalStyle(`${collapsedRowsInMobile} tbody tr:not(:last-child)`, {
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            borderBottom: `1px solid ${skinVars.colors.divider}`,
-        },
-    },
-});
-
-globalStyle(`${collapsedRowsInMobile}${boxed} tbody tr`, {
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            border: `1px solid ${skinVars.colors.border}`,
-            background: skinVars.colors.backgroundContainer,
-            borderRadius: skinVars.borderRadii.container,
-            padding: '24px 16px',
-            marginBottom: 16,
-        },
-    },
-});
-
-globalStyle(`${collapsedRowsInMobile}${boxed} tbody tr:last-child`, {
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            marginBottom: 0,
-        },
-    },
-});
-
-// Hide headers from UI. Dont use display: none for screen readers
-globalStyle(`${hiddenHeadersInDesktop} thead tr`, {
-    '@media': {
-        [mq.desktopOrBigger]: {
-            position: 'absolute',
-            top: -9999,
-            left: -9999,
-        },
-    },
-});
-
-globalStyle(`${hiddenHeadersInMobile} thead tr`, {
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            position: 'absolute',
-            top: -9999,
-            left: -9999,
-        },
-    },
-});
-
-// In collapse-rows mode, we don't render actions as a table cell in mobile
-globalStyle(`${collapsedRowsInMobile} ${actionsTableCell}`, {
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            display: 'none',
-        },
-    },
-});
-
-// In collapse-rows mode, we don't render top actions in desktop
-globalStyle(`${collapsedRowsInMobile} ${topActions}`, {
-    display: 'none',
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            display: 'block',
-        },
-    },
-});