@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.28

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

@@ -22,5 +22,5 @@ type LineChartProps = {
  * See https://nivo.rocks/line/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-export declare const LineChart: ({ height, margin, xScale, yScale, data, withLegend, axisFormatters, pointFormatters, tickValues, chartProps, style, "data-testid": dataTestId, }: LineChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LineChart: ({ height, margin, xScale, yScale, data, withLegend, axisFormatters, pointFormatters, tickValues, chartProps, style, "data-testid": dataTestId, }: LineChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LineChart/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { ResponsiveLine } from "@nivo/line";
 import { useTheme } from "@ultraviolet/themes";
 import { useState, useEffect } from "react";
@@ -8,12 +8,7 @@ import { getNivoTheme } from "../../helpers/nivoTheme.js";
 import { CustomLegend } from "./CustomLegend.js";
 import { getMinChartValue, getMaxChartValue } from "./helpers.js";
 import { LineChartTooltip } from "./Tooltip.js";
-const DEFAULT_MARGIN = {
-  bottom: 50,
-  left: 60,
-  right: 25,
-  top: 50
-};
+const DEFAULT_MARGIN = { bottom: 50, left: 60, right: 25, top: 50 };
 const DEFAULT_XSCALE = {
   format: "%Y-%m-%dT%H:%M:%S%Z",
   // 2021-08-30T02:56:07Z
@@ -21,9 +16,7 @@ const DEFAULT_XSCALE = {
   type: "time",
   useUTC: false
 };
-const DEFAULT_YSCALE = {
-  type: "linear"
-};
+const DEFAULT_YSCALE = { type: "linear" };
 const DEFAULT_CHARTPROPS = {};
 const LineChart = ({
   height = "537px",
@@ -48,43 +41,66 @@ const LineChart = ({
       label: d?.["label"]
     }))
   };
-  const [selected, setSelected] = useState(dataset.datasets?.map(({
-    id
-  }, index) => `${id}${index}`));
-  const finalData = dataset.datasets?.filter(({
-    id
-  }, index) => selected ? selected.includes(`${id}${index}`) : false);
+  const [selected, setSelected] = useState(
+    dataset.datasets?.map(({ id }, index) => `${id}${index}`)
+  );
+  const finalData = dataset.datasets?.filter(
+    ({ id }, index) => selected ? selected.includes(`${id}${index}`) : false
+  );
   useEffect(() => {
     if (selected !== void 0) {
       return;
     }
-    setSelected(dataset.datasets?.map(({
-      id
-    }, index) => `${id}${index}`));
+    setSelected(dataset.datasets?.map(({ id }, index) => `${id}${index}`));
   }, [dataset.datasets, selected]);
   const localColors = getLegendColor(theme);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { style: {
-      height,
-      ...style
-    }, children: /* @__PURE__ */ jsx(ResponsiveLine, { axisBottom: {
-      format: axisFormatters?.bottom,
-      tickPadding: 5,
-      tickRotation: 0,
-      tickSize: 5,
-      tickValues: tickValues?.bottom
-    }, axisLeft: {
-      format: axisFormatters?.left,
-      tickPadding: 5,
-      tickRotation: 0,
-      tickSize: 5,
-      tickValues: tickValues?.left
-    }, colors: localColors, curve: "monotoneX", data: finalData ?? [], "data-testid": dataTestId, margin, pointSize: 10, theme: getNivoTheme(theme), tooltip: LineChartTooltip, useMesh: true, xFormat: pointFormatters?.x, xScale, yFormat: pointFormatters?.y, yScale: {
-      max: getMaxChartValue(finalData),
-      min: getMinChartValue(finalData),
-      ...yScale
-    }, ...chartProps }) }),
-    withLegend && /* @__PURE__ */ jsx(CustomLegend, { axisTransformer: axisFormatters?.left, data: dataset.datasets, selected: selected ?? [], setSelected })
+    /* @__PURE__ */ jsx("div", { style: { height, ...style }, children: /* @__PURE__ */ jsx(
+      ResponsiveLine,
+      {
+        axisBottom: {
+          format: axisFormatters?.bottom,
+          tickPadding: 5,
+          tickRotation: 0,
+          tickSize: 5,
+          tickValues: tickValues?.bottom
+        },
+        axisLeft: {
+          format: axisFormatters?.left,
+          tickPadding: 5,
+          tickRotation: 0,
+          tickSize: 5,
+          tickValues: tickValues?.left
+        },
+        colors: localColors,
+        curve: "monotoneX",
+        data: finalData ?? [],
+        "data-testid": dataTestId,
+        margin,
+        pointSize: 10,
+        theme: getNivoTheme(theme),
+        tooltip: LineChartTooltip,
+        useMesh: true,
+        xFormat: pointFormatters?.x,
+        xScale,
+        yFormat: pointFormatters?.y,
+        yScale: {
+          max: getMaxChartValue(finalData),
+          min: getMinChartValue(finalData),
+          ...yScale
+        },
+        ...chartProps
+      }
+    ) }),
+    withLegend && /* @__PURE__ */ jsx(
+      CustomLegend,
+      {
+        axisTransformer: axisFormatters?.left,
+        data: dataset.datasets,
+        selected: selected ?? [],
+        setSelected
+      }
+    )
   ] });
 };
 export {

package/dist/components/Link/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon, OpenInNewIcon, ArrowRightIcon } from "@ultraviolet/icons";
 import { forwardRef, useState, useRef, useMemo, useEffect } from "react";
 import recursivelyGetChildrenString from "../../helpers/recursivelyGetChildrenString.js";
@@ -7,63 +7,80 @@ import { Tooltip } from "../Tooltip/index.js";
 import { link, defaultLink, iconLeftLink, containerIconLink, iconRightLink } from "./styles.css.js";
 const ICON_SIZE = "small";
 const BLANK_TARGET_ICON_SIZE = "small";
-const Link = forwardRef(({
-  children,
-  href,
-  target,
-  download,
-  sentiment = "info",
-  prominence,
-  size = "large",
-  iconPosition,
-  rel,
-  className,
-  onClick,
-  "aria-label": ariaLabel,
-  "aria-current": ariaCurrent,
-  "aria-keyshortcuts": ariaKeyshortcuts,
-  oneLine = false,
-  "data-testid": dataTestId,
-  variant = "standalone",
-  style
-}, ref) => {
-  const isBlank = target === "_blank";
-  const computedRel = rel || (isBlank ? "noopener noreferrer" : void 0);
-  const [isTruncated, setIsTruncated] = useState(false);
-  const elementRef = useRef(null);
-  const usedRef = ref ?? elementRef;
-  const finalStringChildren = recursivelyGetChildrenString(children);
-  const textVariant = useMemo(() => {
-    if (size === "xsmall") {
-      return "captionStrong";
-    }
-    if (size === "small") {
-      return "bodySmallStrong";
-    }
-    return "bodyStrong";
-  }, [size]);
-  useEffect(() => {
-    if (oneLine && usedRef?.current) {
-      const {
-        offsetWidth,
-        scrollWidth
-      } = usedRef.current;
-      setIsTruncated(offsetWidth < scrollWidth);
-    }
-  }, [oneLine, ref, usedRef]);
-  return /* @__PURE__ */ jsx(Tooltip, { text: oneLine && isTruncated ? finalStringChildren : "", children: /* @__PURE__ */ jsxs("a", { "aria-current": ariaCurrent, "aria-keyshortcuts": ariaKeyshortcuts, "aria-label": ariaLabel, className: `${className ? `${className} ` : ""}${link({
-    oneLine,
-    prominence,
-    sentiment,
-    type: variant,
-    variant: textVariant
-  })} ${defaultLink}`, "data-testid": dataTestId, "data-variant": variant, download, href, onClick, ref: usedRef, rel: computedRel, style, target, children: [
-    !isBlank && iconPosition === "left" ? /* @__PURE__ */ jsx(ArrowLeftIcon, { className: iconLeftLink, size: ICON_SIZE }) : null,
+const Link = forwardRef(
+  ({
     children,
-    isBlank ? /* @__PURE__ */ jsx("span", { className: containerIconLink, children: /* @__PURE__ */ jsx(OpenInNewIcon, { className: iconRightLink, size: BLANK_TARGET_ICON_SIZE }) }) : null,
-    !isBlank && iconPosition === "right" ? /* @__PURE__ */ jsx(ArrowRightIcon, { className: iconRightLink, size: ICON_SIZE }) : null
-  ] }) });
-});
+    href,
+    target,
+    download,
+    sentiment = "info",
+    prominence,
+    size = "large",
+    iconPosition,
+    rel,
+    className,
+    onClick,
+    "aria-label": ariaLabel,
+    "aria-current": ariaCurrent,
+    "aria-keyshortcuts": ariaKeyshortcuts,
+    oneLine = false,
+    "data-testid": dataTestId,
+    variant = "standalone",
+    style
+  }, ref) => {
+    const isBlank = target === "_blank";
+    const computedRel = rel || (isBlank ? "noopener noreferrer" : void 0);
+    const [isTruncated, setIsTruncated] = useState(false);
+    const elementRef = useRef(null);
+    const usedRef = ref ?? elementRef;
+    const finalStringChildren = recursivelyGetChildrenString(children);
+    const textVariant = useMemo(() => {
+      if (size === "xsmall") {
+        return "captionStrong";
+      }
+      if (size === "small") {
+        return "bodySmallStrong";
+      }
+      return "bodyStrong";
+    }, [size]);
+    useEffect(() => {
+      if (oneLine && usedRef?.current) {
+        const { offsetWidth, scrollWidth } = usedRef.current;
+        setIsTruncated(offsetWidth < scrollWidth);
+      }
+    }, [oneLine, ref, usedRef]);
+    return /* @__PURE__ */ jsx(Tooltip, { text: oneLine && isTruncated ? finalStringChildren : "", children: /* @__PURE__ */ jsxs(
+      "a",
+      {
+        "aria-current": ariaCurrent,
+        "aria-keyshortcuts": ariaKeyshortcuts,
+        "aria-label": ariaLabel,
+        className: `${className ? `${className} ` : ""}${link({ oneLine, prominence, sentiment, type: variant, variant: textVariant })} ${defaultLink}`,
+        "data-testid": dataTestId,
+        "data-variant": variant,
+        download,
+        href,
+        onClick,
+        ref: usedRef,
+        rel: computedRel,
+        style,
+        target,
+        children: [
+          !isBlank && iconPosition === "left" ? /* @__PURE__ */ jsx(ArrowLeftIcon, { className: iconLeftLink, size: ICON_SIZE }) : null,
+          children,
+          isBlank ? /* @__PURE__ */ jsx("span", { className: containerIconLink, children: /* @__PURE__ */ jsx(
+            OpenInNewIcon,
+            {
+              className: iconRightLink,
+              size: BLANK_TARGET_ICON_SIZE
+            }
+          ) }) : null,
+          !isBlank && iconPosition === "right" ? /* @__PURE__ */ jsx(ArrowRightIcon, { className: iconRightLink, size: ICON_SIZE }) : null
+        ]
+      }
+    ) });
+  }
+);
 export {
   Link
 };

package/dist/components/List/Cell.js

@@ -1,31 +1,33 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { forwardRef } from "react";
 import { useColumnProvider } from "./ColumnProvider.js";
 import { listCell } from "./styles.css.js";
 import { maxWidthCell, minWidthCell, widthCell } from "./variables.css.js";
-const Cell = forwardRef(({
-  children,
-  className,
-  "data-testid": dataTestid,
-  colSpan,
-  style
-}, ref) => {
-  const {
-    maxWidth,
-    minWidth,
-    width
-  } = useColumnProvider();
-  return /* @__PURE__ */ jsx("td", { className: `${className ? `${className} ` : ""}${listCell}`, colSpan, "data-testid": dataTestid, ref, style: {
-    ...assignInlineVars({
-      [widthCell]: width,
-      [minWidthCell]: minWidth,
-      [maxWidthCell]: maxWidth
-    }),
-    ...style
-  }, children });
-});
+const Cell = forwardRef(
+  ({ children, className, "data-testid": dataTestid, colSpan, style }, ref) => {
+    const { maxWidth, minWidth, width } = useColumnProvider();
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: `${className ? `${className} ` : ""}${listCell}`,
+        colSpan,
+        "data-testid": dataTestid,
+        ref,
+        style: {
+          ...assignInlineVars({
+            [widthCell]: width,
+            [minWidthCell]: minWidth,
+            [maxWidthCell]: maxWidth
+          }),
+          ...style
+        },
+        children
+      }
+    );
+  }
+);
 export {
   Cell
 };

package/dist/components/List/ColumnProvider.d.ts

@@ -5,7 +5,7 @@ type ColumnProviderProps = {
     minWidth?: string;
     children?: ReactNode;
 };
-export declare const ColumnProvider: ({ width, minWidth, maxWidth, children, }: ColumnProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ColumnProvider: ({ width, minWidth, maxWidth, children, }: ColumnProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useColumnProvider: () => {
     width: string;
     maxWidth: string;

package/dist/components/List/ColumnProvider.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 const ColumnContext = createContext(void 0);
 const ColumnProvider = ({
@@ -6,11 +6,17 @@ const ColumnProvider = ({
   minWidth,
   maxWidth,
   children
-}) => /* @__PURE__ */ jsx(ColumnContext.Provider, { value: {
-  maxWidth: maxWidth ?? "none",
-  minWidth: minWidth ?? "auto",
-  width: width ?? "auto"
-}, children });
+}) => /* @__PURE__ */ jsx(
+  ColumnContext.Provider,
+  {
+    value: {
+      maxWidth: maxWidth ?? "none",
+      minWidth: minWidth ?? "auto",
+      width: width ?? "auto"
+    },
+    children
+  }
+);
 const useColumnProvider = () => {
   const context = useContext(ColumnContext);
   if (!context) {

package/dist/components/List/HeaderCell.d.ts

@@ -10,5 +10,5 @@ type HeaderCellProps = {
     minWidth?: string;
     maxWidth?: string;
 };
-export declare const HeaderCell: ({ children, isOrdered, orderDirection, onOrder, className, info, width, minWidth, maxWidth, }: HeaderCellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const HeaderCell: ({ children, isOrdered, orderDirection, onOrder, className, info, width, minWidth, maxWidth, }: HeaderCellProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/List/HeaderCell.js

@@ -1,14 +1,12 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { InformationOutlineIcon, SouthShortIcon, SortIcon as SortIcon$1 } from "@ultraviolet/icons";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Stack } from "../Stack/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { listHeaderCell, listSortIcon } from "./styles.css.js";
 import { maxWidthHeaderCell, minWidthHeaderCell, widthHeaderCell } from "./variables.css.js";
-const SortIcon = ({
-  order
-}) => order ? /* @__PURE__ */ jsx(SouthShortIcon, { className: listSortIcon[order], sentiment: "primary" }) : /* @__PURE__ */ jsx(SortIcon$1, { sentiment: "neutral" });
+const SortIcon = ({ order }) => order ? /* @__PURE__ */ jsx(SouthShortIcon, { className: listSortIcon[order], sentiment: "primary" }) : /* @__PURE__ */ jsx(SortIcon$1, { sentiment: "neutral" });
 const HeaderCell = ({
   children,
   isOrdered,
@@ -27,22 +25,41 @@ const HeaderCell = ({
     order = "descending";
   }
   const handleOrder = onOrder ? () => onOrder(order === "ascending" ? "desc" : "asc") : void 0;
-  return /* @__PURE__ */ jsx("th", { "aria-sort": order, className: `${className ? `${className} ` : ""}${listHeaderCell}`, onClick: handleOrder, onKeyDown: handleOrder ? (event) => {
-    if (event.key === " " || event.key === "Enter") {
-      handleOrder();
-      if (event.key === " ") {
-        event.preventDefault();
-      }
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      "aria-sort": order,
+      className: `${className ? `${className} ` : ""}${listHeaderCell}`,
+      onClick: handleOrder,
+      onKeyDown: handleOrder ? (event) => {
+        if (event.key === " " || event.key === "Enter") {
+          handleOrder();
+          if (event.key === " ") {
+            event.preventDefault();
+          }
+        }
+      } : void 0,
+      role: onOrder ? "button columnheader" : void 0,
+      style: assignInlineVars({
+        [widthHeaderCell]: width,
+        [minWidthHeaderCell]: minWidth,
+        [maxWidthHeaderCell]: maxWidth
+      }),
+      tabIndex: handleOrder ? 0 : -1,
+      children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
+        children,
+        info ? /* @__PURE__ */ jsx(Tooltip, { text: info, children: /* @__PURE__ */ jsx(
+          InformationOutlineIcon,
+          {
+            prominence: "weak",
+            sentiment: "neutral",
+            size: "small"
+          }
+        ) }) : null,
+        orderDirection !== void 0 && isOrdered !== void 0 ? /* @__PURE__ */ jsx(SortIcon, { order }) : null
+      ] })
     }
-  } : void 0, role: onOrder ? "button columnheader" : void 0, style: assignInlineVars({
-    [widthHeaderCell]: width,
-    [minWidthHeaderCell]: minWidth,
-    [maxWidthHeaderCell]: maxWidth
-  }), tabIndex: handleOrder ? 0 : -1, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-    children,
-    info ? /* @__PURE__ */ jsx(Tooltip, { text: info, children: /* @__PURE__ */ jsx(InformationOutlineIcon, { prominence: "weak", sentiment: "neutral", size: "small" }) }) : null,
-    orderDirection !== void 0 && isOrdered !== void 0 ? /* @__PURE__ */ jsx(SortIcon, { order }) : null
-  ] }) });
+  );
 };
 export {
   HeaderCell

package/dist/components/List/HeaderRow.d.ts

@@ -3,5 +3,5 @@ type RowProps = {
     hasSelectAllColumn: boolean;
     children: ReactNode;
 };
-export declare const HeaderRow: ({ children, hasSelectAllColumn }: RowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const HeaderRow: ({ children, hasSelectAllColumn }: RowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/List/HeaderRow.js

@@ -1,22 +1,24 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox } from "../Checkbox/index.js";
 import { HeaderCell } from "./HeaderCell.js";
 import { useListContext } from "./ListContext.js";
 import { listHeaderRow, listNoPaddingHeaderCell } from "./styles.css.js";
-const HeaderRow = ({
-  children,
-  hasSelectAllColumn
-}) => {
-  const {
-    allRowSelectValue,
-    selectAllHandler,
-    selectedRowIds,
-    expandButton
-  } = useListContext();
+const HeaderRow = ({ children, hasSelectAllColumn }) => {
+  const { allRowSelectValue, selectAllHandler, selectedRowIds, expandButton } = useListContext();
   const selectableRowCount = Object.keys(selectedRowIds).length;
   return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: listHeaderRow, children: [
-    hasSelectAllColumn ? /* @__PURE__ */ jsx(HeaderCell, { className: listNoPaddingHeaderCell, children: /* @__PURE__ */ jsx(Checkbox, { "aria-label": "select all", checked: allRowSelectValue, disabled: selectableRowCount === 0, name: "list-select-checkbox", onChange: selectAllHandler, value: "all" }) }) : null,
+    hasSelectAllColumn ? /* @__PURE__ */ jsx(HeaderCell, { className: listNoPaddingHeaderCell, children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        "aria-label": "select all",
+        checked: allRowSelectValue,
+        disabled: selectableRowCount === 0,
+        name: "list-select-checkbox",
+        onChange: selectAllHandler,
+        value: "all"
+      }
+    ) }) : null,
     expandButton ? /* @__PURE__ */ jsx(HeaderCell, { className: listNoPaddingHeaderCell, children: null }) : null,
     children
   ] }) });

package/dist/components/List/ListContext.d.ts

@@ -38,6 +38,6 @@ export type ListProviderProps = {
     onSelectedChange?: Dispatch<SetStateAction<string[]>>;
     columns: ColumnProps[];
 };
-export declare const ListProvider: ({ children, autoCollapse, selectable, expandButton, onSelectedChange, columns, }: ListProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ListProvider: ({ children, autoCollapse, selectable, expandButton, onSelectedChange, columns, }: ListProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useListContext: () => ListContextValue;
 export {};