@trackunit/react-components 0.1.58 → 0.1.61

package/index.js

@@ -3,7 +3,6 @@ import { tw, tws, twx } from '@trackunit/tailwind-styled-components';
 import * as React 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 { useMeasure, useCopyToClipboard } from 'react-use';
 import { format, formatDistance } from 'date-fns';
 import { useFloating, offset, flip, size, shift, autoUpdate, useInteractions, useClick, useHover, useRole, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
@@ -293,7 +292,7 @@ const Root$9 = tw.span `
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-const ActionButton = ({ type, value, dataTestId, iconSize }) => {
+const ActionButton = ({ type, value, dataTestId, iconSize, disabled }) => {
     const getIconName = () => {
         switch (type) {
             case "PHONE_NUMBER":
@@ -319,7 +318,7 @@ const ActionButton = ({ type, value, dataTestId, iconSize }) => {
                 return window.open(`tel:${value}`);
         }
     };
-    return (jsx(ActionContainer, { children: jsx(StyledIconButton, { "$fieldSize": iconSize, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsx(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction }) }));
+    return (jsx(ActionContainer, { children: jsx(StyledIconButton, { "$fieldSize": iconSize, disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsx(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction }) }));
 };
 const ActionContainer = tw.div `
   tu-action-container
@@ -717,62 +716,6 @@ const HeadingContainer$1 = tw.div `
   tu-card__header-heading-container
 `;
 
-/**
- * The Chart component is a wrapper component for ECharts.
- *
- * Handles events and click functionality.
- *
- * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
- *
- * @param {ChartProps} props - The props for the Chart component
- * @returns {JSX.Element} Chart component
- */
-const Chart = ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
-    var _a, _b;
-    const echartsRef = React.useRef(null);
-    const eventHandlers = React.useMemo(() => {
-        const values = {};
-        if (onDataZoom !== undefined) {
-            values.dataZoom = onDataZoom;
-        }
-        if (onBrush !== undefined) {
-            values.brush = onBrush;
-        }
-        if (onBrushSelected !== undefined) {
-            values.brushSelected = onBrushSelected;
-        }
-        if (mouseLeaveChart !== undefined) {
-            values.globalout = mouseLeaveChart;
-        }
-        if (mouseMoveChart !== undefined) {
-            values.mouseMove = (event) => {
-                var _a;
-                mouseMoveChart(event, (_a = echartsRef === null || echartsRef === void 0 ? void 0 : echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
-            };
-        }
-        return values;
-    }, [onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart]);
-    React.useEffect(() => {
-        var _a;
-        const instance = (_a = echartsRef === null || echartsRef === void 0 ? void 0 : echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance();
-        if (instance && onClick) {
-            instance.on("click", onClick);
-        }
-        return () => {
-            if (instance && !instance.isDisposed()) {
-                instance.off("click", onClick);
-            }
-        };
-    }, [onClick, echartsRef]);
-    return (jsx(ChartContainer, Object.assign({ style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" }, "data-testid": dataTestId }, { children: showLoading ? (jsxs(SpinnerContainer, { children: [jsx(Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && (jsx(Text$1, Object.assign({ align: "center", subtle: true }, { children: loadingOption.text })))] })) : (jsxs(Fragment, { children: [jsx(EChart, { ref: echartsRef, option: options, opts: { width: "auto", height: "auto", renderer: renderer }, notMerge: !merge, onEvents: eventHandlers, className: className, style: style, onChartReady: onChartReady }), timezoneLabel] })) })));
-};
-const SpinnerContainer = tw.div `
-  tu-chart-spinner-container
-`;
-const ChartContainer = tw.div `
-  tu-chart-container
-`;
-
 /**
  * The Label component is used for labels for input fields.
  * This component is **not used directly**, but is part of the FormGroup and Field components.
@@ -1257,6 +1200,66 @@ const Overlay = tw.div `
   ${({ $open }) => $open && tws `tu-drawer__overlay--open`}
 `;
 
+/**
+ * The Drop Zone can be used to drag and drop files
+ *
+ * @param {DropZoneProps} props - The props for the DropZone component
+ * @returns {JSX.Element} DropZone component
+ */
+const DropZone = (_a) => {
+    var { className, dataTestId, filesSelected, label, size = "large", isInvalid = false, disabled = false } = _a, rest = __rest(_a, ["className", "dataTestId", "filesSelected", "label", "size", "isInvalid", "disabled"]);
+    const [dragActive, setDragActive] = React__default.useState(false);
+    const [fileDropped, setFileDropped] = React__default.useState(false);
+    // function that handles drag enter, drag leave and drag over
+    const handleDrag = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if ((e.type === "dragenter" || e.type === "dragover") && !disabled) {
+            setDragActive(true);
+        }
+        else if (e.type === "dragleave") {
+            setDragActive(false);
+        }
+    };
+    //function to handle when user clicks on dropzone to upload
+    const handleChange = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.target.files && !disabled) {
+            filesSelected(e.target.files);
+        }
+    };
+    //funtion to handle drop
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragActive(false);
+        if (e.dataTransfer.files && e.dataTransfer.files[0] && !disabled) {
+            filesSelected(e.dataTransfer.files);
+            setFileDropped(true);
+        }
+    };
+    return (jsxs(Root$5, Object.assign({ "$disabled": disabled, "$isInvalid": isInvalid, "$dragActive": dragActive, "$fileDropped": fileDropped, "$size": size, className: className, "data-testid": dataTestId, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, onClick: e => {
+            if (disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        } }, rest, { children: [jsx("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxs(DropZoneLabel, Object.assign({ htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label` }, { children: [jsx(Icon, { type: "solid", name: "ArrowUpCircleIcon", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsx("span", { children: label })] }))] })));
+};
+const Root$5 = tw.div `
+  tu-drop-zone
+   ${({ $size }) => ($size === "small" ? tws `tu-drop-zone--small` : null)}
+   ${({ $size }) => ($size === "medium" ? tws `tu-drop-zone--medium` : null)}
+   ${({ $size }) => ($size === "large" ? tws `tu-drop-zone--large` : null)}
+   ${({ $dragActive }) => ($dragActive ? tws `tu-drop-zone--drag-active` : null)}
+   ${({ $fileDropped }) => ($fileDropped ? tws `tu-drop-zone--drop-complete` : null)}
+   ${({ $isInvalid }) => ($isInvalid ? tws `tu-drop-zone--invalid` : null)}
+   ${({ $disabled }) => ($disabled ? tws `tu-drop-zone--disabled` : null)}
+`;
+const DropZoneLabel = tw.label `
+  tu-drop-zone__label
+`;
+
 /**
  * A Email Input component is used for input of the type Email.
  *
@@ -1268,12 +1271,29 @@ const Overlay = tw.div `
  * For specific input types make sure to use the corresponding input component.
  */
 const EmailInput = React.forwardRef((_a, ref) => {
-    var { fieldSize = "medium", disableAction = false, dataTestId } = _a, rest = __rest(_a, ["fieldSize", "disableAction", "dataTestId"]);
+    var { fieldSize = "medium", disabled = false, dataTestId } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId"]);
     const [email, setEmail] = React.useState("");
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
     };
-    return (jsx(BaseInput, Object.assign({ dataTestId: dataTestId, fieldSize: fieldSize, ref: ref, type: "email", placeholder: rest.placeholder || "mail@example.com", onChange: e => setEmail(e.target.value) }, rest, { actions: !disableAction && (jsx(ActionButton, { value: email, type: "EMAIL", onClick: sendEmail, dataTestId: dataTestId && `${dataTestId}-emailIcon`, iconSize: fieldSize })) })));
+    return (jsx(BaseInput, Object.assign({ dataTestId: dataTestId, fieldSize: fieldSize, ref: ref, type: "email", placeholder: rest.placeholder || "mail@example.com", onChange: e => setEmail(e.target.value) }, rest, { actions: jsx(ActionButton, { disabled: disabled, value: email, type: "EMAIL", onClick: sendEmail, dataTestId: dataTestId && `${dataTestId}-emailIcon`, iconSize: fieldSize }) })));
+});
+
+/**
+ * The EmailField component is used to enter email.
+ * EmailField validates that user enters a valid email address.
+ *
+ */
+const EmailField = forwardRef((_a, ref) => {
+    var { label, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId"]);
+    const [value, setValue] = useState(defaultValue);
+    // Type guard to check if value is a string
+    function isString(inputValue) {
+        return typeof inputValue === "string";
+    }
+    // Check the regular expression only if value is a string
+    const renderAsInvalid = !!errorMessage || (isString(value) && !/^\S+@\S+\.\S+$/.test(value));
+    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(EmailInput, Object.assign({ ref: ref, value: value, onChange: e => setValue(e.target.value), isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -1298,7 +1318,7 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {JSX.Element} Indicator component
  */
-const Indicator$1 = (_a) => {
+const Indicator = (_a) => {
     var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false } = _a, rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping"]);
     return (jsxs(Container$4, Object.assign({ "$color": color, "data-testid": dataTestId }, rest, { title: !withLabel ? label : undefined }, { children: [jsxs(IconBackground, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", "$withBackground": withBackground }, { children: [ping && jsx(Ping, { "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" }), icon] })), label !== undefined && withLabel && (jsx(Label$1, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label" }, { children: label })))] })));
 };
@@ -1377,37 +1397,6 @@ const Ping = tw.span `
   tu-indicator__ping
 `;
 
-/**
- * The LegendItem component is used to show form legends.
- *
- * @param {ILegendItem} props - The props for the LegendItem component
- * @returns {JSX.Element} LegendItem component
- */
-const LegendItem = ({ className, label, disabled, selected, onClick, color, dataTestId }) => {
-    const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
-    return (jsxs(Root$5, Object.assign({ "data-testid": dataTestId, "$disabled": disabled, className: className, "$selected": selected, onClick: handleOnClick }, { children: [jsx(Indicator, { style: { backgroundColor: color }, "$selected": selected }), label && jsx("p", { children: label })] })));
-};
-const Root$5 = tw.div `
-  inline-flex
-  items-center
-  transition-all
-  ease-in-out
-  duration-200
-  text-neutral-500
-  hover:text-neutral-700
-  text-sm
-  gap-2
-  ${p => (p.$disabled ? tws `text-neutral-300` : p.$selected ? tws `text-black` : "")}
-  ${p => (p.$selected ? tws `font-medium` : null)}
-  ${p => (p.onClick ? tws `cursor-pointer` : tws `cursor-default`)}
-`;
-const Indicator = tw.div `
-  w-3
-  h-3
-  rounded-[50%]
-  ${p => (p.$selected ? tws `border border-black border-opacity-50` : null)}
-`;
-
 /**
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
  *
@@ -1723,7 +1712,7 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, page
     useEffect(() => {
         if (pageIndex !== undefined && (isNaN(pageIndex) || pageIndex < 0)) {
             setPage(pageIndex);
-            pageIndex !== undefined && setCurrentPage(String(pageIndex + 1));
+            setCurrentPage(String(pageIndex + 1));
         }
     }, [pageIndex, setPage, setCurrentPage, pageCount]);
     const handlePageChange = useCallback((action) => {
@@ -1781,72 +1770,6 @@ const PhoneInput = React.forwardRef((_a, ref) => {
     return (jsx(BaseInput, Object.assign({ ref: ref, dataTestId: dataTestId, fieldSize: fieldSize, type: "tel", onChange: e => setPhoneNumber(e.target.value), actions: !disableAction && (jsx(ActionButton, { value: phoneNumber, type: "PHONE_NUMBER", onClick: callNumber, dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest)));
 });
 
-/**
- * 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 } = useContext(UNSAFE_NavigationContext);
     useEffect(() => {
@@ -2658,7 +2581,7 @@ const Timeline = ({ className, dataTestId, children }) => {
  * @param {TimeLineElementProps} props the props
  * @returns {JSX.Element} component
  */
-const TimelineElement = ({ date, children, className, dataTestId = "timeline-date", dot = jsx(Indicator$1, { className: tws `mt-[-1px]`, color: "neutral", icon: jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = `${format(date, "MMM d, yyyy")} (${formatDistance(date, new Date(), { addSuffix: true })})`, onClick, }) => {
+const TimelineElement = ({ date, children, className, dataTestId = "timeline-date", dot = jsx(Indicator, { className: tws `mt-[-1px]`, color: "neutral", icon: jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = `${format(date, "MMM d, yyyy")} (${formatDistance(date, new Date(), { addSuffix: true })})`, onClick, }) => {
     var _a;
     return (jsxs("li", Object.assign({ className: `${tws `tu-timeline-element`}${(_a = " " + className) !== null && _a !== void 0 ? _a : ""}  `, "data-date": `${date}`, "data-testid": dataTestId && `${dataTestId}`, onClick: () => onClick && onClick() }, { children: [jsx("div", Object.assign({ className: tws `tu-timeline-element__dot` }, { children: dot })), jsx("div", { children: header }), jsx("div", {}), jsx("div", { children: jsx("div", { children: children }) })] })));
 };
@@ -3162,4 +3085,4 @@ const Layout = tw.div `
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, ContentGridArea, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmailInput, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NavGridArea, NumberField, NumberInput, PageHeader, Pagination, PhoneInput, PieChart, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, Sidebar, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, UploadField, UploadInput, ValueBar, docs, getDevicePixelRatio, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePrompt, useTimeout };
+export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Collapse, ContentGridArea, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, DropZone, EmailField, EmailInput, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NavGridArea, NumberField, NumberInput, PageHeader, Pagination, PhoneInput, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, Sidebar, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, UploadField, UploadInput, ValueBar, docs, getDevicePixelRatio, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePrompt, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.58",
+  "version": "0.1.61",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -8,8 +8,6 @@
     "@trackunit/tailwind-styled-components": "0.0.54",
     "react": "18.2.0",
     "@trackunit/ui-design-tokens": "0.0.60",
-    "echarts": "5.4.0",
-    "echarts-for-react": "3.0.2",
     "react-use": "17.4.0",
     "date-fns": "2.29.3",
     "react-day-picker": "8.3.7",

package/src/components/ActionButton/ActionButton.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { CommonProps } from "../../common";
+import { ButtonCommonProps } from "../buttons";
 type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL";
 type FieldSize = "small" | "medium";
-interface ActionButtonProps extends CommonProps {
+interface ActionButtonProps extends ButtonCommonProps, CommonProps {
     /**
      * The type of action performed when clicking the button.
      */
@@ -26,5 +27,5 @@ interface ActionButtonProps extends CommonProps {
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-export declare const ActionButton: ({ type, value, dataTestId, iconSize }: ActionButtonProps) => JSX.Element;
+export declare const ActionButton: ({ type, value, dataTestId, iconSize, disabled }: ActionButtonProps) => JSX.Element;
 export {};

package/src/components/DropZone/DropZone.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { CommonProps, Size } from "../../common";
+import { BaseInputProps } from "../BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "type" | "suffix" | "prefix" | "addonAfter" | "addonBefore" | "actions" | "placeholder" | "fieldSize" | "size" | "nonInteractive">;
+export interface DropZoneProps extends BaseInputExposedProps, CommonProps {
+    /**
+     * A string to set the label in Drop Zone.
+     */
+    label: string;
+    /**
+     * A flag to disable the drop zone.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the dropZone
+     * small - padding:8px, medium - padding:16px large - padding:32px
+     */
+    size?: Size;
+    /**
+     * The files dropped can be accessed within filesSelected
+     *
+     * @param file
+     * @returns
+     */
+    filesSelected: (file: FileList) => void;
+}
+/**
+ * The Drop Zone can be used to drag and drop files
+ *
+ * @param {DropZoneProps} props - The props for the DropZone component
+ * @returns {JSX.Element} DropZone component
+ */
+export declare const DropZone: ({ className, dataTestId, filesSelected, label, size, isInvalid, disabled, ...rest }: DropZoneProps) => JSX.Element;
+export {};

package/src/components/EmailField/EmailField.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { BaseInputProps } from "../BaseInput";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface EmailFieldProps extends FormGroupExposedProps, BaseInputProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * The EmailField component is used to enter email.
+ * EmailField validates that user enters a valid email address.
+ *
+ */
+export declare const EmailField: import("react").ForwardRefExoticComponent<EmailFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/EmailInput/EmailInput.d.ts

@@ -1,12 +1,5 @@
 import * as React from "react";
-import { CommonProps } from "../../common";
 import { BaseInputProps } from "../BaseInput";
-export interface EmailInputProps extends BaseInputProps, CommonProps {
-    /**
-     * A flag to disable the email button.
-     */
-    disableAction?: boolean;
-}
 /**
  * A Email Input component is used for input of the type Email.
  *
@@ -17,4 +10,4 @@ export interface EmailInputProps extends BaseInputProps, CommonProps {
  * A reference to the input element is provided as the `ref` prop.
  * For specific input types make sure to use the corresponding input component.
  */
-export declare const EmailInput: React.ForwardRefExoticComponent<EmailInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const EmailInput: React.ForwardRefExoticComponent<BaseInputProps & React.RefAttributes<HTMLInputElement>>;

package/src/components/index.d.ts

@@ -4,7 +4,6 @@ export * from "./Badge";
 export * from "./BaseInput";
 export * from "./buttons";
 export * from "./Card";
-export * from "./Chart";
 export * from "./Checkbox";
 export * from "./Collapse";
 export * from "./CopyableText";
@@ -12,6 +11,8 @@ export * from "./DateField/DateField";
 export * from "./DateInput/DateInput";
 export * from "./DayPicker";
 export * from "./Drawer/Drawer";
+export * from "./DropZone/DropZone";
+export * from "./EmailField/EmailField";
 export * from "./EmailInput";
 export * from "./ExternalLink/ExternalLink";
 export * from "./FormGroup/FormGroup";
@@ -19,7 +20,6 @@ export * from "./Heading";
 export * from "./Icon/Icon";
 export * from "./Indicator";
 export * from "./Label";
-export * from "./LegendItem";
 export * from "./Menu";
 export * from "./Modal";
 export * from "./NumberField/NumberField";
@@ -27,7 +27,6 @@ export * from "./NumberInput/NumberInput";
 export * from "./PageHeader";
 export * from "./Pagination/Pagination";
 export * from "./PhoneInput";
-export * from "./PieChart";
 export * from "./Popover";
 export * from "./Popover/Popover";
 export * from "./Prompt";

package/src/components/Chart/Chart.d.ts

@@ -1,81 +0,0 @@
-import { EChartsType } from "echarts";
-import * as React from "react";
-import { CommonProps } from "../../common";
-export interface IOptionsType {
-    [key: string]: any;
-}
-export interface ChartProps extends CommonProps {
-    /**
-     * Option values for EChart.
-     */
-    options: IOptionsType;
-    /**
-     * Whether or not to low the preloader.
-     */
-    showLoading?: boolean;
-    /**
-     * onClick event.
-     */
-    onClick?: (event: any) => void;
-    /**
-     * onDataZoom event.
-     */
-    onDataZoom?: (event: any) => void;
-    /**
-     * onBrush event.
-     */
-    onBrush?: (event: any) => void;
-    /**
-     * Event fired when brush is selected.
-     */
-    onBrushSelected?: (event: any) => void;
-    /**
-     * Event fired when mouse leaves the chart.
-     */
-    mouseLeaveChart?: () => void;
-    /**
-     * Event fired when mouse is moving over the chart.
-     */
-    mouseMoveChart?: (event: any, chart: EChartsType | undefined) => void;
-    /**
-     * CSS styles for the chart.
-     */
-    style?: Record<string, string | number>;
-    /**
-     * To denote of chart is ready or not.
-     */
-    onChartReady?: (chart: any) => void;
-    /**
-     * Whether to merge with previous option.
-     */
-    merge?: boolean;
-    /**
-     * Values for the loading component.
-     */
-    loadingOption?: {
-        text: string;
-    };
-    /**
-     * Time-zone label.
-     */
-    timezoneLabel?: React.ReactNode;
-    /**
-     * Type of rendered used. Either "svg" or "canvas".
-     */
-    renderer?: "svg" | "canvas";
-    /**
-     * Value used to find element by `data-testid` attribute.
-     */
-    dataTestId?: string;
-}
-/**
- * The Chart component is a wrapper component for ECharts.
- *
- * Handles events and click functionality.
- *
- * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
- *
- * @param {ChartProps} props - The props for the Chart component
- * @returns {JSX.Element} Chart component
- */
-export declare const Chart: ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, merge, loadingOption, timezoneLabel, renderer, dataTestId, }: ChartProps) => JSX.Element;

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

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

package/src/components/LegendItem/LegendItem.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-export interface ILegendItem {
-    label?: string;
-    selected?: boolean;
-    disabled?: boolean;
-    onClick?: () => void;
-    color: string;
-    className?: string;
-    dataTestId?: string;
-}
-/**
- * The LegendItem component is used to show form legends.
- *
- * @param {ILegendItem} props - The props for the LegendItem component
- * @returns {JSX.Element} LegendItem component
- */
-export declare const LegendItem: ({ className, label, disabled, selected, onClick, color, dataTestId }: ILegendItem) => JSX.Element;

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

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

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

@@ -1,55 +0,0 @@
-/// <reference types="react" />
-import { CommonProps } from "../../common/CommonProps";
-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

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