@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

package/dist/components/Tooltip/index.js

@@ -1,25 +1,49 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Popup } from "../Popup/index.js";
 import { tooltip } from "./styles.css.js";
-const Tooltip = forwardRef(({
-  children,
-  text = "",
-  placement = "auto",
-  id,
-  className,
-  containerFullWidth,
-  containerFullHeight,
-  maxWidth = 232,
-  visible,
-  innerRef,
-  role = "tooltip",
-  "data-testid": dataTestId,
-  portalTarget,
-  debounceDelay,
-  tabIndex
-}, tooltipRef) => /* @__PURE__ */ jsx(Popup, { className: `${className ? `${className} ` : ""}${tooltip}`, containerFullHeight, containerFullWidth, "data-testid": dataTestId, debounceDelay, id, innerRef, maxWidth, placement, portalTarget, ref: tooltipRef, role, tabIndex, text, visible, children }));
+const Tooltip = forwardRef(
+  ({
+    children,
+    text = "",
+    placement = "auto",
+    id,
+    className,
+    containerFullWidth,
+    containerFullHeight,
+    maxWidth = 232,
+    visible,
+    innerRef,
+    role = "tooltip",
+    "data-testid": dataTestId,
+    portalTarget,
+    debounceDelay,
+    tabIndex,
+    style
+  }, tooltipRef) => /* @__PURE__ */ jsx(
+    Popup,
+    {
+      className: `${className ? `${className} ` : ""}${tooltip}`,
+      containerFullHeight,
+      containerFullWidth,
+      "data-testid": dataTestId,
+      debounceDelay,
+      id,
+      innerRef,
+      maxWidth,
+      placement,
+      portalTarget,
+      ref: tooltipRef,
+      role,
+      style,
+      tabIndex,
+      text,
+      visible,
+      children
+    }
+  )
+);
 export {
   Tooltip
 };

package/dist/components/TreeMapChart/Tooltip.d.ts

@@ -0,0 +1,6 @@
+import type { DataType } from './types';
+type TooltipProps = Pick<DataType, 'content' | 'value'> & {
+    'data-testid'?: string;
+};
+export declare const Tooltip: ({ value, content, "data-testid": dataTestId, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TreeMapChart/Tooltip.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Text } from "../Text/index.js";
+import { treeMapTooltipContainer } from "./styles.css.js";
+const Tooltip = ({
+  value,
+  content,
+  "data-testid": dataTestId
+}) => /* @__PURE__ */ jsxs("div", { className: treeMapTooltipContainer, "data-testid": dataTestId, children: [
+  /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "primary", variant: "bodyStronger", children: content }),
+  value ? /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "primary", variant: "bodyStronger", children: value }) : null
+] });
+export {
+  Tooltip
+};

package/dist/components/TreeMapChart/index.d.ts

@@ -0,0 +1,18 @@
+import type { TooltipProps, TreeMapSvgProps } from '@nivo/treemap';
+import type { ComponentProps } from 'react';
+import { Tooltip } from './Tooltip';
+import type { DataType } from './types';
+type TreeMapChartProps = {
+    height?: string | number;
+    data: DataType;
+    className?: string;
+    tooltipFunction?: (props: TooltipProps<DataType>['node']['data']) => ComponentProps<typeof Tooltip>;
+    chartProps?: Partial<TreeMapSvgProps<DataType>>;
+    'data-testid'?: string;
+};
+/**
+ * TreeMapChart component is used to display data in a TreeMap chart format. It uses the Nivo library under the hood.
+ * See https://nivo.rocks/treemap/ for more information.
+ */
+export declare const TreeMapChart: ({ height, data, tooltipFunction, chartProps, className, "data-testid": dataTestId, }: TreeMapChartProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TreeMapChart/index.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ResponsiveTreeMapHtml } from "@nivo/treemap";
+import { useTheme } from "@ultraviolet/themes";
+import { useMemo, useCallback } from "react";
+import { getDataColors } from "../../helpers/treeMap.js";
+import { Text } from "../Text/index.js";
+import { treeMapContentWrapper } from "./styles.css.js";
+import { Tooltip } from "./Tooltip.js";
+const TreeMapChart = ({
+  height = "537px",
+  // maintains aspect ratio based on standard 1074px width
+  data,
+  tooltipFunction,
+  chartProps,
+  className,
+  "data-testid": dataTestId
+}) => {
+  const theme = useTheme();
+  const DEFAULT_COLOR = theme.colors.primary.text;
+  const colors = useMemo(() => getDataColors(data, theme), [data, theme]);
+  const tooltip = useCallback(
+    (props) => {
+      const { value, content } = tooltipFunction ? tooltipFunction(props.node.data) : { content: props.node.data.content, value: props.node.data.value };
+      return /* @__PURE__ */ jsx(Tooltip, { content, value });
+    },
+    [tooltipFunction]
+  );
+  const nodeComponent = useCallback(
+    ({ node }) => {
+      const backgroundColor = colors[node.data.id] || DEFAULT_COLOR;
+      const spacing = 4;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: treeMapContentWrapper,
+          onMouseEnter: node.onMouseEnter,
+          onMouseLeave: node.onMouseLeave,
+          onMouseMove: node.onMouseMove,
+          style: {
+            backgroundColor,
+            height: node.height - spacing,
+            left: node.x + spacing / 2,
+            top: node.y + spacing / 2,
+            width: node.width - spacing
+          },
+          children: /* @__PURE__ */ jsx(Text, { as: "div", oneLine: true, variant: "captionStrong", children: node.data.content })
+        }
+      );
+    },
+    [colors, DEFAULT_COLOR]
+  );
+  return /* @__PURE__ */ jsx("div", { className, "data-testid": dataTestId, style: { height }, children: /* @__PURE__ */ jsx(
+    ResponsiveTreeMapHtml,
+    {
+      animate: false,
+      data,
+      enableParentLabel: false,
+      identity: "id",
+      labelSkipSize: 0,
+      leavesOnly: true,
+      motionConfig: "none",
+      nodeComponent,
+      orientLabel: false,
+      tile: "squarify",
+      tooltip,
+      value: "value",
+      ...chartProps
+    }
+  ) });
+};
+export {
+  TreeMapChart
+};

package/dist/components/TreeMapChart/styles.css.d.ts

@@ -0,0 +1,2 @@
+export declare const treeMapTooltipContainer: string;
+export declare const treeMapContentWrapper: string;

package/dist/components/TreeMapChart/styles.css.js

@@ -0,0 +1,7 @@
+/* empty css                          */
+var treeMapTooltipContainer = "uv_1pnrimq0";
+var treeMapContentWrapper = "uv_1pnrimq1";
+export {
+  treeMapContentWrapper,
+  treeMapTooltipContainer
+};

package/dist/components/TreeMapChart/types.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export type DataType = {
+    id: string;
+    value?: number;
+    content: string | ReactNode;
+    children?: DataType[];
+};

package/dist/components/UnitInput/index.d.ts

@@ -21,6 +21,7 @@ type UnitInputProps = {
     helper?: string;
     unitError?: string;
     width?: CSSProperties['width'];
+    maxWidth?: CSSProperties['maxWidth'];
     placeholderUnit?: string;
     error?: boolean | string;
     success?: boolean | string;
@@ -29,6 +30,6 @@ type UnitInputProps = {
     step?: number | string;
     dropdownAlign?: ComponentProps<typeof SelectInput>['dropdownAlign'];
     templateColumns?: ComponentProps<typeof Row>['templateColumns'];
-} & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'name' | 'id' | 'placeholder' | 'disabled' | 'readOnly' | 'required' | 'autoFocus' | 'onKeyDown'>;
-export declare const UnitInput: ({ id, name, max, min, autoFocus, size, placeholder, placeholderUnit, onChange, onChangeUnitValue, value, unitValue, selectInputWidth, disabled, options, className, label, step, error, required, helper, unitError, success, "data-testid": dataTestId, width, labelInformation, readOnly, onFocus, onBlur, onKeyDown, dropdownAlign, templateColumns, }: UnitInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'name' | 'id' | 'placeholder' | 'disabled' | 'readOnly' | 'required' | 'autoFocus' | 'onKeyDown' | 'style'>;
+export declare const UnitInput: ({ id, name, max, min, autoFocus, size, placeholder, placeholderUnit, onChange, onChangeUnitValue, value, unitValue, selectInputWidth, disabled, options, className, label, step, error, required, helper, unitError, success, "data-testid": dataTestId, width, maxWidth, labelInformation, readOnly, onFocus, onBlur, onKeyDown, dropdownAlign, templateColumns, style, }: UnitInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};