@trackunit/react-components 0.0.208 → 0.1.2

package/index.css

@@ -52,14 +52,12 @@
 
   &--small {
     @apply py-1
-      px-2
-      max-h-7;
+      px-2;
   }
 
   &--large {
     @apply py-2
-      px-4
-      max-h-9;
+      px-4;
   }
 
   &--primary {
@@ -74,16 +72,15 @@
   }
 
   &--secondary {
-    @apply bg-slate-200
-      text-slate-600
-      hover:bg-slate-400
-      hover:text-slate-800
-      active:text-slate-700
-      active:bg-slate-300
-      focus:ring-slate-300
-      disabled:bg-slate-200
-      disabled:hover:bg-slate-200
-      disabled:text-slate-400;
+    @apply component-button-secondary-color
+      hover:bg-secondary-400
+      hover:text-secondary-800
+      active:text-secondary-700
+      active:bg-secondary-300
+      focus:ring-secondary-300
+      disabled:bg-secondary-200
+      disabled:hover:bg-secondary-200
+      disabled:text-secondary-400;
   }
 
   &--danger {
@@ -111,7 +108,8 @@
   }
 
   &--tertiary {
-    @apply bg-white border
+    @apply bg-white 
+      border
       text-slate-600
       active:bg-slate-100
       active:text-slate-700

package/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { tw, tws, twx } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
-import React__default, { useState, forwardRef, useMemo, cloneElement, useCallback, Children, useRef, memo, useEffect, useContext } from 'react';
+import React__default, { useState, forwardRef, useMemo, cloneElement, useCallback, useEffect, Children, useRef, memo, useContext } from 'react';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import EChart from 'echarts-for-react';
 import { v4 } from 'uuid';
@@ -13,7 +13,7 @@ import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
 import { useClickOutside } from 'react-browser-hooks';
 import usePortal from 'react-useportal';
-import { Helmet } from 'react-helmet';
+import { HelmetProvider, Helmet } from 'react-helmet-async';
 import ReactSelect, { components } from 'react-select';
 export { default as ValueType } from 'react-select';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
@@ -332,7 +332,7 @@ const Icon$1 = ({
       className: iconSizeClassName
     })
   }, {
-    children: jsx(Root$6, Object.assign({
+    children: jsx(Root$7, Object.assign({
       "$color": color,
       onClick: onClick,
       "data-testid": dataTestId,
@@ -351,7 +351,7 @@ const Icon$1 = ({
 const LoadingDot = tw.span`
   tu-loading-dot
 `;
-const Root$6 = tw.span`
+const Root$7 = tw.span`
   tu-icon
   ${({
   $color
@@ -922,18 +922,20 @@ const ROLE_CARD = "region";
  * @param {CardProps} props - The props for the Card component
  * @returns {JSX.Element} Card component
  */
-const Card = ({
-  children,
-  onClick,
-  fullHeight = false,
-  onMouseEnter,
-  onMouseLeave,
-  className,
-  dataTestId,
-  overflow = "visible",
-  gridArea
-}) => {
-  return jsx(StyledCard$1, Object.assign({
+const Card = _a => {
+  var {
+      children,
+      onClick,
+      fullHeight = false,
+      onMouseEnter,
+      onMouseLeave,
+      className,
+      dataTestId,
+      overflow = "visible",
+      gridArea
+    } = _a,
+    rest = __rest(_a, ["children", "onClick", "fullHeight", "onMouseEnter", "onMouseLeave", "className", "dataTestId", "overflow", "gridArea"]);
+  return jsx(StyledCard$2, Object.assign({}, rest, {
     "$fullHeight": fullHeight,
     "$overflow": overflow,
     onClick: onClick,
@@ -963,7 +965,7 @@ const getOverflow$1 = () => ({
   };
   return overflows[$overflow];
 };
-const StyledCard$1 = tw.div`
+const StyledCard$2 = tw.div`
   tu-card
   ${p => p.$fullHeight ? `h-full` : null}
 
@@ -1010,12 +1012,9 @@ const getDirection = () => ({
   return directions[$direction];
 };
 const densityAuto = tws`
-  gap-3
-  p-3
-  sm:gap-4 
-  sm:p-4
-  md:gap-4 
-  md:p-6
+  component-card-spacing
+  sm:component-card-spacing-sm
+  md:component-card-spacing-md
 `;
 const DensityFinder = ({
   $density
@@ -1353,7 +1352,7 @@ const Label$2 = ({
   disabled,
   isInvalid
 }) => {
-  return jsx(Root$5, Object.assign({
+  return jsx(Root$6, Object.assign({
     id: id || "",
     htmlFor: htmlFor || "",
     className: className,
@@ -1364,7 +1363,7 @@ const Label$2 = ({
     children: children
   }));
 };
-const Root$5 = tw.label`
+const Root$6 = tw.label`
 tu-label
 ${({
   $disabled
@@ -2278,6 +2277,123 @@ const DayRangePicker = ({
   });
 };
 
+/**
+ * The drawer provides a slideover which can be used to provide access to different locations in the application.
+ *
+ * @param {DrawerProps} props - The props for the Drawer component
+ * @returns {JSX.Element} Drawer component
+ */
+const Drawer = ({
+  open,
+  onClose = () => {},
+  children,
+  disableOverlay = false,
+  position = "left",
+  className,
+  dataTestId
+}) => {
+  const {
+    context
+  } = useFloating();
+  useEffect(() => {
+    // Close overlay when pressing escape button.
+    const onKeyPress = e => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    if (open) {
+      window.addEventListener("keyup", onKeyPress);
+    }
+    return () => {
+      window.removeEventListener("keyup", onKeyPress);
+    };
+  }, [open, onClose]);
+  return jsx(FloatingFocusManager, Object.assign({
+    context: context
+  }, {
+    children: open ? jsxs(Root$5, Object.assign({
+      id: "drawer"
+    }, {
+      children: [!disableOverlay && jsx(Overlay, {
+        "aria-hidden": open,
+        "$open": open,
+        onClick: onClose,
+        id: "drawer__overlay"
+      }), jsx(StyledCard$1, Object.assign({
+        "aria-hidden": open,
+        "data-testId": dataTestId,
+        "$open": open,
+        "$position": position,
+        id: "drawer__card",
+        className: className
+      }, {
+        children: children
+      }))]
+    })) :
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    jsx(Fragment, {})
+  }));
+};
+const getPositionStyles = $position => {
+  switch ($position) {
+    case "top":
+      return tws`tu-drawer__card--top`;
+    case "right":
+      return tws`tu-drawer__card--right`;
+    case "bottom":
+      return tws`tu-drawer__card--bottom`;
+    case "left":
+    default:
+      return tws`tu-drawer__card--left`;
+  }
+};
+const StyledCard$1 = twx(Card)`
+  tu-drawer__card
+  ${({
+  $open
+}) => $open && tws`tu-drawer__card--open`}
+  ${({
+  $position
+}) => getPositionStyles($position)}
+`;
+const Root$5 = tw.div`
+  tu-drawer
+`;
+const Overlay = tw.div`
+  tu-drawer__overlay
+  ${({
+  $open
+}) => $open && tws`tu-drawer__overlay--open`}
+`;
+
+/**
+ *  The external link component is used to link to an external page outside the Trackunit Manager.
+ *
+ * @param {ExternalLinkProps} props - The props for the external link component
+ * @returns {JSX.Element} External Link component
+ */
+const ExternalLink = ({
+  rel = "noreferrer",
+  target = "_blank",
+  href,
+  className,
+  children = href,
+  title = href,
+  dataTestId
+}) => {
+  return jsx("a", Object.assign({
+    "data-testid": dataTestId,
+    className: className,
+    title: title,
+    href: href,
+    rel: rel,
+    target: target
+  }, {
+    children: children
+  }));
+};
+
 /**
  * Indicators are non-interactive elements that communicate essential aspects of the state of an asset.
  *
@@ -2558,16 +2674,6 @@ const Divider = tw.hr`
   tu-menu-list__divider
 `;
 
-var DotsDirection;
-(function (DotsDirection) {
-  DotsDirection[DotsDirection["horizontal"] = 0] = "horizontal";
-  DotsDirection[DotsDirection["vertical"] = 1] = "vertical";
-})(DotsDirection || (DotsDirection = {}));
-var MenuPlacement;
-(function (MenuPlacement) {
-  MenuPlacement[MenuPlacement["above"] = 0] = "above";
-  MenuPlacement[MenuPlacement["below"] = 1] = "below";
-})(MenuPlacement || (MenuPlacement = {}));
 /**
  * A kebab menu component.
  * Advice: fill it with MenuList
@@ -2578,37 +2684,43 @@ var MenuPlacement;
 const MoreMenu = ({
   className,
   dataTestId,
-  dotsDirection = DotsDirection.horizontal,
-  menuPlacement = MenuPlacement.below,
+  dotsDirection = "horizontal",
+  menuPlacement,
   iconProps = {
     size: "medium"
   },
   iconButtonProps = {
     size: "small",
     circular: true,
+    square: true,
     color: "tertiary"
   },
   children
 }) => {
   const [actionMenuIsOpen, setActionMenuIsOpen] = useState(false);
-  const dotsName = dotsDirection === DotsDirection.horizontal ? "DotsHorizontalIcon" : "DotsVerticalIcon";
+  const dotsName = dotsDirection === "horizontal" ? "DotsHorizontalIcon" : "DotsVerticalIcon";
   const actionMenuRef = useRef(null);
   useClickOutside(actionMenuRef, () => {
     setActionMenuIsOpen(false);
   });
-  return jsxs(Root$3, Object.assign({
+  return jsx(Root$3, Object.assign({
     ref: actionMenuRef,
     className: className,
     "data-testid": dataTestId
   }, {
-    children: [actionMenuIsOpen && menuPlacement === MenuPlacement.above && children, jsx(IconButton, Object.assign({}, iconButtonProps, {
-      icon: jsx(Icon$1, Object.assign({
-        name: dotsName
-      }, iconProps)),
-      onClick: () => {
-        setActionMenuIsOpen(!actionMenuIsOpen);
-      }
-    })), actionMenuIsOpen && menuPlacement === MenuPlacement.below && children]
+    children: jsx(Popover, Object.assign({
+      render: () => children,
+      placement: menuPlacement
+    }, {
+      children: jsx(IconButton, Object.assign({}, iconButtonProps, {
+        icon: jsx(Icon$1, Object.assign({
+          name: dotsName
+        }, iconProps)),
+        onClick: () => {
+          setActionMenuIsOpen(!actionMenuIsOpen);
+        }
+      }))
+    }))
   }));
 };
 const Root$3 = tw.div`
@@ -2680,17 +2792,15 @@ const Modal = React.forwardRef(({
       children: jsx(StyledCard, Object.assign({
         dataTestId: dataTestId,
         className: className,
-        maxWidth: maxWidth
+        "$maxWidth": maxWidth
       }, {
         children: children
       }))
     }))
   }));
 });
-const getCardMaxWidth = () => ({
-  maxWidth
-}) => {
-  maxWidth = maxWidth ? maxWidth : "full";
+const getCardMaxWidth = $maxWidth => {
+  $maxWidth = $maxWidth ? $maxWidth : "full";
   const widths = {
     slim: tws`tu-modal__card--slim`,
     narrow: tws`tu-modal__card--narrow`,
@@ -2698,11 +2808,13 @@ const getCardMaxWidth = () => ({
     normal: tws`tu-modal__card--normal`,
     full: ""
   };
-  return widths[maxWidth];
+  return widths[$maxWidth];
 };
 const StyledCard = twx(Card)`
   tu-modal__card
-  ${getCardMaxWidth()}
+  ${({
+  $maxWidth
+}) => getCardMaxWidth($maxWidth)}
 `;
 const StyledDiv = tw.div`
   tu-modal__container
@@ -3201,6 +3313,108 @@ const PageInput = tw.input`
  [-moz-appearance:textfield]
 `;
 
+/**
+ * Create a PieChart with legends based on our current Chart component
+ *
+ * @param {PieChartProps} props - The props for the Chart component
+ * @returns {JSX.Element} Chart component
+ */
+const PieChart = ({
+  data,
+  size = "full",
+  loading,
+  onClick,
+  className,
+  dataTestId
+}) => jsxs(ChartRoot, Object.assign({
+  className: className,
+  "data-testid": dataTestId
+}, {
+  children: [jsx("div", {
+    children: size === "full" && jsx("div", Object.assign({
+      className: "flex flex-col",
+      "data-testid": "legend"
+    }, {
+      children: data === null || data === void 0 ? void 0 : data.map(item => jsx(LegendItem, {
+        dataTestId: `legend-${item.id}`,
+        label: (item === null || item === void 0 ? void 0 : item.count) !== undefined ? `${item.name} (${item.count})` : item.name,
+        onClick: onClick ? () => onClick(item) : undefined,
+        selected: item.selected,
+        color: item.color
+      }, item.id))
+    }))
+  }), jsx(Chart, {
+    showLoading: loading,
+    style: size === "full" ? {
+      height: 110,
+      width: 110
+    } : {
+      height: 60,
+      width: 60
+    },
+    onClick: evt => {
+      const clickedEntry = data === null || data === void 0 ? void 0 : data.find(x => x.id === evt.data.id);
+      if (onClick && clickedEntry) {
+        onClick(clickedEntry);
+      }
+    },
+    options: {
+      legend: {
+        show: false
+      },
+      tooltip: {
+        show: false
+      },
+      series: [{
+        type: "pie",
+        radius: ["50%", "75%"],
+        center: ["50%", "50%"],
+        minAngle: 10,
+        selectedOffset: 8,
+        itemStyle: {
+          borderColor: "#ffffff",
+          borderWidth: 2
+        },
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: "center",
+          fontSize: "18",
+          fontWeight: "bold"
+        },
+        emphasis: {
+          label: {
+            show: true,
+            formatter: "{c}"
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: data === null || data === void 0 ? void 0 : data.map(item => {
+          var _a;
+          return {
+            id: item.id,
+            name: item.name,
+            value: (_a = item === null || item === void 0 ? void 0 : item.count) !== null && _a !== void 0 ? _a : 0,
+            itemStyle: {
+              color: item.color
+            }
+          };
+        })
+      }]
+    }
+  })]
+}));
+const ChartRoot = tw.div`
+  flex
+  flex-direction-col
+  flex-wrap-reverse
+  justify-between
+  items-center
+  h-full
+`;
+
 function useConfirmExit(confirmExit, when = true) {
   const {
     navigator
@@ -3507,8 +3721,10 @@ const SectionHeader = ({
   addon
 }) => {
   return jsxs(SectionHeaderContainer, {
-    children: [jsx(Helmet, {
-      title: title
+    children: [jsx(HelmetProvider, {
+      children: jsx(Helmet, {
+        title: title
+      })
     }), jsxs(StyledFlex, {
       children: [jsx(Heading$1, Object.assign({
         variant: "secondary",
@@ -5218,4 +5434,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, DotsDirection, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MenuPlacement, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NumberField, NumberInput, PageHeader, Pagination, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePrompt, useTimeout };
+export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NumberField, NumberInput, PageHeader, Pagination, PieChart, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePrompt, useTimeout };

package/package.json

@@ -1,26 +1,27 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.208",
+  "version": "0.1.2",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
     "@trackunit/css-core": "0.0.64",
-    "@storybook/addon-docs": "6.5.12",
+    "@storybook/addon-docs": "6.5.14",
     "@trackunit/tailwind-styled-components": "0.0.50",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "@trackunit/ui-design-tokens": "0.0.51",
+    "@trackunit/react-core-contexts-test": "0.1.13",
     "echarts-for-react": "3.0.2",
     "echarts": "5.4.0",
     "uuid": "8.3.2",
     "react-use": "17.4.0",
     "date-fns": "2.29.3",
     "react-day-picker": "8.3.7",
+    "@floating-ui/react-dom-interactions": "0.13.3",
     "@trackunit/ui-icons": "0.0.54",
     "react-browser-hooks": "2.2.4",
     "react-useportal": "1.0.17",
-    "@floating-ui/react-dom-interactions": "0.13.3",
-    "react-router-dom": "6.4.3",
-    "react-helmet": "6.1.0",
+    "react-router-dom": "6.4.5",
+    "react-helmet-async": "1.3.0",
     "react-select": "5.7.0",
     "jest-canvas-mock": "2.4.0"
   },

package/src/components/Card/Card.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 export declare const ROLE_CARD = "region";
 declare type Overflow = "visible" | "hidden" | "scroll" | "auto";
-export interface CardProps extends CommonProps {
+export interface CardProps extends CommonProps, React.InputHTMLAttributes<HTMLDivElement> {
     /**
      * Whether the card should have full height or not.
      */
@@ -41,5 +41,5 @@ export interface CardProps extends CommonProps {
  * @param {CardProps} props - The props for the Card component
  * @returns {JSX.Element} Card component
  */
-export declare const Card: ({ children, onClick, fullHeight, onMouseEnter, onMouseLeave, className, dataTestId, overflow, gridArea, }: CardProps) => JSX.Element;
+export declare const Card: ({ children, onClick, fullHeight, onMouseEnter, onMouseLeave, className, dataTestId, overflow, gridArea, ...rest }: CardProps) => JSX.Element;
 export {};

package/src/components/Checkbox/Checkbox.d.ts

@@ -5,6 +5,10 @@ export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HT
      * A string element to be displayed as a label
      */
     label?: React.ReactNode;
+    /**
+     * Children to be displayed
+     */
+    children?: React.ReactNode;
     /**
      * An boolean flag to set checkbox to disabled state
      */

package/src/components/Drawer/Drawer.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+export declare type Position = "left" | "right" | "top" | "bottom";
+export interface DrawerProps extends CommonProps {
+    /**
+     * Specifies whether the drawer is open or not.
+     */
+    open: boolean;
+    /**
+     * The onClose handler for the drawer.
+     */
+    onClose?: () => void;
+    /**
+     * The position of the drawer.
+     */
+    position?: Position;
+    /**
+     * The child node that will be rendered inside the drawer.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the drawer needs an overlay or not. Without the overlay, user will have to handle mechanism for closing the drawer.
+     */
+    disableOverlay?: boolean;
+}
+/**
+ * The drawer provides a slideover which can be used to provide access to different locations in the application.
+ *
+ * @param {DrawerProps} props - The props for the Drawer component
+ * @returns {JSX.Element} Drawer component
+ */
+export declare const Drawer: ({ open, onClose, children, disableOverlay, position, className, dataTestId, }: DrawerProps) => JSX.Element;

package/src/components/ExternalLink/ExternalLink.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { CommonProps } from "../../common";
+export interface ExternalLinkProps extends CommonProps {
+    /**
+     * The URL to which users are redirected
+     */
+    href: string;
+    /**
+     * Child elements.
+     */
+    children: React.ReactNode;
+    /**
+     * The text to display on the URL. Defaults to the url itself.
+     */
+    title?: string;
+    /**
+     * Where to display the linked URL. Defaults to "_blank".
+     */
+    target?: "_blank" | "_self" | "_parent" | "top";
+    /**
+     * Used to specify the relationship between the link and the current document. Defaults to "noreferrer".
+     */
+    rel?: string;
+}
+/**
+ *  The external link component is used to link to an external page outside the Trackunit Manager.
+ *
+ * @param {ExternalLinkProps} props - The props for the external link component
+ * @returns {JSX.Element} External Link component
+ */
+export declare const ExternalLink: ({ rel, target, href, className, children, title, dataTestId, }: ExternalLinkProps) => JSX.Element;

package/src/components/Menu/MoreMenu/MoreMenu.d.ts

@@ -2,20 +2,15 @@
 import { CommonProps } from "../../../common/CommonProps";
 import { IconButtonProps } from "../../buttons";
 import { IconProps } from "../../Icon/Icon";
-export declare enum DotsDirection {
-    horizontal = 0,
-    vertical = 1
-}
-export declare enum MenuPlacement {
-    above = 0,
-    below = 1
-}
+import { PopoverPlacement } from "../../Popover";
+export declare type DotsDirection = "horizontal" | "vertical";
+export declare type MenuPlacement = "above" | "below";
 declare type FilteredIconProps = Omit<IconProps, "name">;
 declare type FilteredIconButtonProps = Omit<IconButtonProps, "icon" | "onClick">;
 export interface MoreMenuProps extends CommonProps {
     children: JSX.Element;
     dotsDirection?: DotsDirection;
-    menuPlacement?: MenuPlacement;
+    menuPlacement?: PopoverPlacement;
     iconProps?: FilteredIconProps;
     iconButtonProps?: FilteredIconButtonProps;
 }

package/src/components/PieChart/PieChart.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+import { CommonProps } from "../../common";
+declare type Size = "compact" | "full";
+export interface ChartData<T extends object = object> {
+    /**
+     * Unique ID for this entry. Not visibile for the user
+     */
+    id: string;
+    /**
+     * The text to show for to the user
+     */
+    name: string;
+    /**
+     * Number of elements with wrapped under this item
+     */
+    count?: number;
+    /**
+     * The color to use in the chart and legends for this item
+     */
+    color: string;
+    /**
+     * If selected, it'll be highlighted
+     */
+    selected?: boolean;
+    /**
+     * Supply the original object that this chart data item was constructed from. It'll be available on callbacks
+     */
+    original?: T;
+}
+export interface PieChartProps<T extends object> extends CommonProps {
+    /**
+     * Array of data points to show
+     */
+    data: ChartData<T>[] | undefined;
+    /**
+     * onClick handler which includes the data object clicked on
+     */
+    onClick?: (data: ChartData<T>) => void;
+    /**
+     * Show chart as loading
+     */
+    loading?: boolean;
+    /**
+     * When compact, the chart is smaller and legends are hidden.
+     */
+    size?: Size;
+}
+/**
+ * Create a PieChart with legends based on our current Chart component
+ *
+ * @param {PieChartProps} props - The props for the Chart component
+ * @returns {JSX.Element} Chart component
+ */
+export declare const PieChart: <T extends object>({ data, size, loading, onClick, className, dataTestId, }: PieChartProps<T>) => JSX.Element;
+export {};

package/src/components/PieChart/index.d.ts

@@ -0,0 +1 @@
+export * from "./PieChart";

package/src/components/index.d.ts

@@ -11,6 +11,8 @@ export * from "./CopyableText";
 export * from "./DateField/DateField";
 export * from "./DateInput/DateInput";
 export * from "./DayPicker";
+export * from "./Drawer/Drawer";
+export * from "./ExternalLink/ExternalLink";
 export * from "./FormGroup/FormGroup";
 export * from "./Heading";
 export * from "./Icon/Icon";
@@ -23,6 +25,7 @@ export * from "./NumberField/NumberField";
 export * from "./NumberInput/NumberInput";
 export * from "./PageHeader";
 export * from "./Pagination/Pagination";
+export * from "./PieChart";
 export * from "./Popover";
 export * from "./Popover/Popover";
 export * from "./Prompt";

package/src/test-utils/hooks.d.ts

@@ -1,4 +1,4 @@
-import { RenderHookOptions } from "@testing-library/react-hooks";
-declare const customRenderHook: <T, K>(callback: (props: T) => K, options?: RenderHookOptions<T> | undefined) => import("@testing-library/react-hooks").RenderHookResult<T, K, import("@testing-library/react-hooks").Renderer<T>>;
-export * from "@testing-library/react-hooks";
+import { RenderHookOptions } from "@testing-library/react";
+declare const customRenderHook: <T, K>(callback: (props: T) => K, options?: RenderHookOptions<T, typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement> | undefined) => import("@testing-library/react").RenderHookResult<K, T>;
+export * from "@testing-library/react";
 export { customRenderHook as renderHook };