new Tooltip component (as property)

Author: forman

chartlets.js/CHANGES.md

@@ -37,9 +37,11 @@
   - using `schema` instead of `type` property for callback arguments
   - using `return` object with `schema` property for callback return values
 
-* New components
+* New (MUI) components
   - `LinearProgress`
 
+* Supporting `tooltip` property for interactive MUI components.
+
 ## Version 0.0.29 (from 2024/11/26)
 
 * Resolved warnings that appeared when using Vega charts.

chartlets.js/packages/lib/src/plugins/mui/Button.tsx

@@ -3,6 +3,7 @@ import MuiButton from "@mui/material/Button";
 import MuiIcon from "@mui/material/Icon";
 
 import type { ComponentState, ComponentProps } from "@/index";
+import { Tooltip } from "./Tooltip";
 
 interface ButtonState extends ComponentState {
   text?: string;
@@ -45,18 +46,20 @@ export function Button({
     }
   };
   return (
-    <MuiButton
-      id={id}
-      name={name}
-      style={style}
-      variant={variant}
-      color={color}
-      disabled={disabled}
-      startIcon={startIcon && <MuiIcon>{startIcon}</MuiIcon>}
-      endIcon={endIcon && <MuiIcon>{endIcon}</MuiIcon>}
-      onClick={handleClick}
-    >
-      {text}
-    </MuiButton>
+    <Tooltip>
+      <MuiButton
+        id={id}
+        name={name}
+        style={style}
+        variant={variant}
+        color={color}
+        disabled={disabled}
+        startIcon={startIcon && <MuiIcon>{startIcon}</MuiIcon>}
+        endIcon={endIcon && <MuiIcon>{endIcon}</MuiIcon>}
+        onClick={handleClick}
+      >
+        {text}
+      </MuiButton>
+    </Tooltip>
   );
 }

chartlets.js/packages/lib/src/plugins/mui/Checkbox.tsx

@@ -4,6 +4,7 @@ import MuiFormControl from "@mui/material/FormControl";
 import MuiFormControlLabel from "@mui/material/FormControlLabel";
 
 import type { ComponentState, ComponentProps } from "@/index";
+import { Tooltip } from "@mui/material";
 
 interface CheckboxState extends ComponentState {
   label?: string;
@@ -19,6 +20,7 @@ export function Checkbox({
   value,
   disabled,
   style,
+  tooltip,
   label,
   onChange,
 }: CheckboxProps) {
@@ -33,19 +35,21 @@ export function Checkbox({
     }
   };
   return (
-    <MuiFormControl variant="filled" size="small" style={style}>
-      <MuiFormControlLabel
-        label={label}
-        control={
-          <MuiCheckbox
-            id={id}
-            name={name}
-            checked={Boolean(value)}
-            disabled={disabled}
-            onChange={handleChange}
-          />
-        }
-      />
-    </MuiFormControl>
+    <Tooltip title={tooltip}>
+      <MuiFormControl variant="filled" size="small" style={style}>
+        <MuiFormControlLabel
+          label={label}
+          control={
+            <MuiCheckbox
+              id={id}
+              name={name}
+              checked={Boolean(value)}
+              disabled={disabled}
+              onChange={handleChange}
+            />
+          }
+        />
+      </MuiFormControl>
+    </Tooltip>
   );
 }

chartlets.js/packages/lib/src/plugins/mui/IconButton.tsx

@@ -3,6 +3,7 @@ import MuiIconButton from "@mui/material/IconButton";
 import MuiIcon from "@mui/material/Icon";
 
 import type { ComponentState, ComponentProps } from "@/index";
+import { Tooltip } from "./Tooltip";
 
 interface IconButtonState extends ComponentState {
   icon?: string;
@@ -24,6 +25,7 @@ export function IconButton({
   id,
   name,
   style,
+  tooltip,
   color,
   icon,
   size,
@@ -41,16 +43,18 @@ export function IconButton({
     }
   };
   return (
-    <MuiIconButton
-      id={id}
-      name={name}
-      style={style}
-      color={color}
-      size={size}
-      disabled={disabled}
-      onClick={handleClick}
-    >
-      <MuiIcon>{icon}</MuiIcon>
-    </MuiIconButton>
+    <Tooltip title={tooltip}>
+      <MuiIconButton
+        id={id}
+        name={name}
+        style={style}
+        color={color}
+        size={size}
+        disabled={disabled}
+        onClick={handleClick}
+      >
+        <MuiIcon>{icon}</MuiIcon>
+      </MuiIconButton>
+    </Tooltip>
   );
 }

chartlets.js/packages/lib/src/plugins/mui/Select.tsx

@@ -5,6 +5,7 @@ import MuiSelect, { type SelectChangeEvent } from "@mui/material/Select";
 
 import type { ComponentState, ComponentProps } from "@/index";
 import { isString } from "@/utils/isString";
+import { Tooltip } from "./Tooltip";
 
 export type SelectOption =
   | string
@@ -27,6 +28,7 @@ export function Select({
   options,
   disabled,
   style,
+  tooltip,
   label,
   onChange,
 }: SelectProps) {
@@ -45,24 +47,26 @@ export function Select({
     }
   };
   return (
-    <MuiFormControl variant="filled" size="small" style={style}>
-      {label && <MuiInputLabel id={`${id}-label`}>{label}</MuiInputLabel>}
-      <MuiSelect
-        labelId={`${id}-label`}
-        id={id}
-        name={name}
-        value={`${value}`}
-        disabled={disabled}
-        onChange={handleChange}
-      >
-        {Array.isArray(options) &&
-          options.map(normalizeSelectOption).map(([value, text], index) => (
-            <MuiMenuItem key={index} value={value}>
-              {text}
-            </MuiMenuItem>
-          ))}
-      </MuiSelect>
-    </MuiFormControl>
+    <Tooltip title={tooltip}>
+      <MuiFormControl variant="filled" size="small" style={style}>
+        {label && <MuiInputLabel id={`${id}-label`}>{label}</MuiInputLabel>}
+        <MuiSelect
+          labelId={`${id}-label`}
+          id={id}
+          name={name}
+          value={`${value}`}
+          disabled={disabled}
+          onChange={handleChange}
+        >
+          {Array.isArray(options) &&
+            options.map(normalizeSelectOption).map(([value, text], index) => (
+              <MuiMenuItem key={index} value={value}>
+                {text}
+              </MuiMenuItem>
+            ))}
+        </MuiSelect>
+      </MuiFormControl>
+    </Tooltip>
   );
 }
 

chartlets.js/packages/lib/src/plugins/mui/Tooltip.test.tsx

@@ -0,0 +1,16 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Tooltip } from "./Tooltip";
+
+describe("Tooltip", () => {
+  it("should render its child component", () => {
+    render(
+      <Tooltip title={"Does nothing :)"}>
+        <button>Click Me</button>
+      </Tooltip>,
+    );
+    // to inspect rendered component, do:
+    // expect(document.querySelector("#typo")).toEqual({});
+    expect(screen.getByText("Click Me")).not.toBeUndefined();
+  });
+});

chartlets.js/packages/lib/src/plugins/mui/Tooltip.tsx

@@ -0,0 +1,11 @@
+import MuiTooltip from "@mui/material/Tooltip";
+import type { ReactElement } from "react";
+
+interface TooltipProps {
+  title?: string;
+  children: ReactElement;
+}
+
+export function Tooltip({ title, children }: TooltipProps) {
+  return title ? <MuiTooltip title={title}>{children}</MuiTooltip> : children;
+}

chartlets.js/packages/lib/src/types/state/component.ts

@@ -23,6 +23,7 @@ export interface ComponentState {
   disabled?: boolean;
   label?: string;
   color?: string;
+  tooltip?: string;
 }
 
 export interface ContainerState extends ComponentState {