How to assign even handler onclick to Polaris components?

Shopify Apps
1

I want to render a number of Box objects in a grid using Polaris but have stumbled upon a issue of setting event handlers for onclick when coding with Typescript.

The code written in plain JSX works

import {Box, Grid, Text} from "@shopify/polaris";

const borderWidth = "0";
function DayCell({key, day, changeTime}) {

    let background = '';
    if (day.gray) {
        background = 'bg-fill-disabled';
    }
    else if (day.today) {
        background = 'bg-fill-info';
    }
    function onShowDayDetails() {
        changeTime(day.date);
    }

    return (
        <Grid.Cell columnSpan={{xs: 1, sm: 1, md: 1, lg: 1, xl: 1}}>
            <Box borderStyle="solid" borderColor="border-brand" borderWidth={borderWidth} background={background} onClick={onShowDayDetails}>
                <Text alignment="end" as='span' fontWeight='bold'>{day.title}</Text>
            </Box>
        </Grid.Cell>
    );
}

Written in typescript, the Box object does not seem to have an attribute of event handler onclick. The code below fails to compile with ts

import {Box, Grid, Text} from "@shopify/polaris";
export const borderWidth = "0";

export interface DayCellProps {
    day: Day;
    changeTime: (date: string) => void;
}

export function DayCell({day, changeTime}: DayCellProps) {
    let background = 'bg-fill-transparent';
    if (day.gray) {
        background = 'bg-fill-disabled';
    }
    else if (day.today) {
        background = 'bg-fill-info';
    }
    console.log("", background);
    const setTime = (event: Event) => {
        event.stopPropagation();
        changeTime(day.date);
    };

    return (
        <Grid.Cell columnSpan={{xs: 1, sm: 1, md: 1, lg: 1, xl: 1}}>
            <Box borderStyle="solid" borderColor="border-brand" borderWidth={borderWidth} background="bg-fill-info" onclick="setTime">
                <Text alignment="end" as='span' fontWeight='bold'>{day.title}</Text>
            </Box>
        </Grid.Cell>
    );
}

It seems that for typescript Box is defined as

React.ForwardRefExoticComponent<BoxProps & React.RefAttributes>

type which does not allow for an attribute onclick

Does anyone know of a workaround for this issue?

2

Found a solution that is working fine. I have noticed that the Box component in Polaris can be assigned an id. From there the code becomes cleaner as shown below

import {Box, Grid, Text} from "@shopify/polaris";
import {Day} from "./Day.ts";
import {useEffect, useId} from "react";
export const borderWidth = "0";

export interface DayCellProps {
    day: Day;
    changeTime: (date: string) => void;
}

export function DayCell({day, changeTime}: DayCellProps) {
    const **id** = useId();
    const setTime = (event: Event) => {
        event.stopPropagation();
        changeTime(day.date);
    };

    useEffect(() => {
        const box = document.getElementById(id);
        if (box) {
            box.addEventListener('click', setTime);
            return () => {
                box.removeEventListener('click', setTime);
            }

        }
        return () => {};
    }, []);

    return (
        <Grid.Cell columnSpan={{xs: 1, sm: 1, md: 1, lg: 1, xl: 1}}>
            <Box as="div" **id={id}** borderStyle="solid" borderColor="border-brand" borderWidth={borderWidth}
                 background={day.gray ? "bg-fill-disabled" : day.today? "bg-fill-info" : "bg-fill-transparent"}>
                <Text alignment="end" as='span' fontWeight='bold'>{day.title}</Text>
            </Box>
        </Grid.Cell>
    );
}