@databiosphere/findable-ui 21.1.1 → 21.2.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "21.1.1"
+  ".": "21.2.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [21.2.0](https://github.com/DataBiosphere/findable-ui/compare/v21.1.1...v21.2.0) (2025-02-12)
+
+
+### Features
+
+* create data dictionary tooltip component ([#317](https://github.com/DataBiosphere/findable-ui/issues/317)) ([#318](https://github.com/DataBiosphere/findable-ui/issues/318)) ([be4fd30](https://github.com/DataBiosphere/findable-ui/commit/be4fd30bcc2d04db230f0beefbae5ff3f7998d0b))
+
 ## [21.1.1](https://github.com/DataBiosphere/findable-ui/compare/v21.1.0...v21.1.1) (2025-01-31)
 
 

package/lib/components/DataDictionary/components/Tooltip/components/Title/constants.d.ts

@@ -0,0 +1,3 @@
+import { StackProps, TypographyProps } from "@mui/material";
+export declare const STACK_PROPS: StackProps;
+export declare const TYPOGRAPHY_PROPS: TypographyProps;

package/lib/components/DataDictionary/components/Tooltip/components/Title/constants.js

@@ -0,0 +1,8 @@
+export const STACK_PROPS = {
+    spacing: 2,
+    useFlexGap: true,
+};
+export const TYPOGRAPHY_PROPS = {
+    color: "ink.light",
+    component: "div",
+};

package/lib/components/DataDictionary/components/Tooltip/components/Title/title.d.ts

@@ -0,0 +1,3 @@
+import { BaseComponentProps } from "../../../../../types";
+import { TitleProps } from "./types";
+export declare const Title: ({ className, description, title, }: BaseComponentProps & Required<TitleProps>) => JSX.Element;

package/lib/components/DataDictionary/components/Tooltip/components/Title/title.js

@@ -0,0 +1,9 @@
+import { Stack, Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_LARGE_500 } from "../../../../../../theme/common/typography";
+import { STACK_PROPS, TYPOGRAPHY_PROPS } from "./constants";
+export const Title = ({ className, description, title, }) => {
+    return (React.createElement(Stack, { ...STACK_PROPS, className: className },
+        React.createElement(Typography, { variant: TEXT_BODY_LARGE_500 }, title),
+        React.createElement(Typography, { ...TYPOGRAPHY_PROPS }, description)));
+};

package/lib/components/DataDictionary/components/Tooltip/components/Title/types.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface TitleProps {
+    description?: ReactNode;
+    title: ReactNode;
+}

package/lib/components/DataDictionary/components/Tooltip/components/Title/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/DataDictionary/components/Tooltip/constants.d.ts

@@ -0,0 +1,2 @@
+import { TooltipProps } from "@mui/material";
+export declare const TOOLTIP_PROPS: Omit<TooltipProps, "children" | "title">;

package/lib/components/DataDictionary/components/Tooltip/constants.js

@@ -0,0 +1,24 @@
+import { TEXT_BODY_SMALL_400_2_LINES } from "../../../../theme/common/typography";
+export const TOOLTIP_PROPS = {
+    arrow: true,
+    disableInteractive: true,
+    enterNextDelay: 250,
+    slotProps: {
+        arrow: { sx: (theme) => ({ color: theme.palette.common.white }) },
+        popper: {
+            modifiers: [
+                { name: "offset", options: { offset: [0, 2] } },
+                { name: "preventOverflow", options: { padding: 8 } },
+            ],
+        },
+        tooltip: {
+            sx: (theme) => ({
+                ...theme.typography[TEXT_BODY_SMALL_400_2_LINES],
+                backgroundColor: theme.palette.common.white,
+                borderRadius: 2,
+                color: theme.palette.ink.main,
+                padding: 4,
+            }),
+        },
+    },
+};

package/lib/components/DataDictionary/components/Tooltip/tooltip.d.ts

@@ -0,0 +1,4 @@
+import { BaseComponentProps } from "../../../types";
+import { TitleProps } from "./components/Title/types";
+import { TooltipProps } from "./types";
+export declare const Tooltip: ({ children, className, description, title, ...props }: BaseComponentProps & TitleProps & TooltipProps) => JSX.Element;

package/lib/components/DataDictionary/components/Tooltip/tooltip.js

@@ -0,0 +1,8 @@
+import { Tooltip as MTooltip } from "@mui/material";
+import React from "react";
+import { Title } from "./components/Title/title";
+import { TOOLTIP_PROPS } from "./constants";
+export const Tooltip = ({ children, className, description, title, ...props }) => {
+    return (React.createElement(MTooltip, { ...TOOLTIP_PROPS, className: className, title: description && React.createElement(Title, { description: description, title: title }), ...props },
+        React.createElement("span", null, children)));
+};

package/lib/components/DataDictionary/components/Tooltip/types.d.ts

@@ -0,0 +1,5 @@
+import { TooltipProps as MTooltipProps } from "@mui/material";
+import { ReactNode } from "react";
+export type TooltipProps = Omit<MTooltipProps, "children"> & {
+    children: ReactNode;
+};

package/lib/components/DataDictionary/components/Tooltip/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "21.1.1",
+  "version": "21.2.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/DataDictionary/components/Tooltip/components/Title/constants.ts

@@ -0,0 +1,11 @@
+import { StackProps, TypographyProps } from "@mui/material";
+
+export const STACK_PROPS: StackProps = {
+  spacing: 2,
+  useFlexGap: true,
+};
+
+export const TYPOGRAPHY_PROPS: TypographyProps = {
+  color: "ink.light",
+  component: "div",
+};

package/src/components/DataDictionary/components/Tooltip/components/Title/title.tsx

@@ -0,0 +1,19 @@
+import { Stack, Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_LARGE_500 } from "../../../../../../theme/common/typography";
+import { BaseComponentProps } from "../../../../../types";
+import { STACK_PROPS, TYPOGRAPHY_PROPS } from "./constants";
+import { TitleProps } from "./types";
+
+export const Title = ({
+  className,
+  description,
+  title,
+}: BaseComponentProps & Required<TitleProps>): JSX.Element => {
+  return (
+    <Stack {...STACK_PROPS} className={className}>
+      <Typography variant={TEXT_BODY_LARGE_500}>{title}</Typography>
+      <Typography {...TYPOGRAPHY_PROPS}>{description}</Typography>
+    </Stack>
+  );
+};

package/src/components/DataDictionary/components/Tooltip/components/Title/types.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+
+export interface TitleProps {
+  description?: ReactNode;
+  title: ReactNode;
+}

package/src/components/DataDictionary/components/Tooltip/constants.ts

@@ -0,0 +1,26 @@
+import { TooltipProps } from "@mui/material";
+import { TEXT_BODY_SMALL_400_2_LINES } from "../../../../theme/common/typography";
+
+export const TOOLTIP_PROPS: Omit<TooltipProps, "children" | "title"> = {
+  arrow: true,
+  disableInteractive: true,
+  enterNextDelay: 250,
+  slotProps: {
+    arrow: { sx: (theme) => ({ color: theme.palette.common.white }) },
+    popper: {
+      modifiers: [
+        { name: "offset", options: { offset: [0, 2] } },
+        { name: "preventOverflow", options: { padding: 8 } },
+      ],
+    },
+    tooltip: {
+      sx: (theme) => ({
+        ...theme.typography[TEXT_BODY_SMALL_400_2_LINES],
+        backgroundColor: theme.palette.common.white,
+        borderRadius: 2,
+        color: theme.palette.ink.main,
+        padding: 4,
+      }),
+    },
+  },
+};

package/src/components/DataDictionary/components/Tooltip/tooltip.tsx

@@ -0,0 +1,26 @@
+import { Tooltip as MTooltip } from "@mui/material";
+import React from "react";
+import { BaseComponentProps } from "../../../types";
+import { Title } from "./components/Title/title";
+import { TitleProps } from "./components/Title/types";
+import { TOOLTIP_PROPS } from "./constants";
+import { TooltipProps } from "./types";
+
+export const Tooltip = ({
+  children,
+  className,
+  description,
+  title,
+  ...props
+}: BaseComponentProps & TitleProps & TooltipProps): JSX.Element => {
+  return (
+    <MTooltip
+      {...TOOLTIP_PROPS}
+      className={className}
+      title={description && <Title description={description} title={title} />}
+      {...props}
+    >
+      <span>{children}</span>
+    </MTooltip>
+  );
+};

package/src/components/DataDictionary/components/Tooltip/types.ts

@@ -0,0 +1,10 @@
+import { TooltipProps as MTooltipProps } from "@mui/material";
+import { ReactNode } from "react";
+
+// `children` is defined as a `ReactNode` instead of an `Element`
+// because the Data Dictionary `Tooltip` component wraps its child in a `span` element.
+// This ensures that `children` can hold a ref properly (see https://mui.com/material-ui/api/tooltip/#props).
+
+export type TooltipProps = Omit<MTooltipProps, "children"> & {
+  children: ReactNode;
+};