@trackunit/react-components 0.0.146 → 0.0.151

package/components/Chart/Chart.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { CommonProps } from "../../common";
+import { EChartsType } from "echarts";
 export interface IOptionsType {
     [key: string]: any;
 }
@@ -32,6 +33,10 @@ export interface ChartProps extends CommonProps {
      * 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.
      */
@@ -73,4 +78,4 @@ export interface ChartProps extends CommonProps {
  * @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, merge, loadingOption, timezoneLabel, renderer, dataTestId, }: ChartProps) => JSX.Element;
+export declare const Chart: ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, merge, loadingOption, timezoneLabel, renderer, dataTestId, }: ChartProps) => JSX.Element;

package/components/DateInput/DateInput.d.ts

@@ -1,24 +1,23 @@
 /// <reference types="react" />
-import { Matcher } from "react-day-picker";
 import { BaseInputProps } from "../BaseInput";
-declare type BaseInputExposedProps = Omit<BaseInputProps, "defaultValue" | "onChange">;
+declare type BaseInputExposedProps = Omit<BaseInputProps, "defaultValue" | "min" | "max" | "value">;
 export interface DateInputProps extends BaseInputExposedProps {
     /**
-     * A default value to be displayed by a input field
+     * A min value in type Date
      */
-    defaultValue?: Date;
+    min?: Date;
     /**
-     * Specification of dates not allowed to be selected - i the form of react-day-picker matcher
+     * A max date value in type Date
      */
-    disabledDays?: Matcher | Matcher[] | undefined;
+    max?: Date;
     /**
-     * A flag that can be set to true to disallow the user to deselect a date. (if false the user can click the selected date to deselect)
+     * A default value in type Date
      */
-    preventDeselect?: boolean;
+    defaultValue?: Date;
     /**
-     * onChange function returning the date instead of input event
+     * A value in type Date
      */
-    onChange?: (date: Date) => void;
+    value?: Date;
 }
 /**
  * A wrapper around BaseInput with a pop-up day picker.

package/components/LegendItem/LegendItem.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface ILegendItem {
-    label: string;
+    label?: string;
     selected?: boolean;
     disabled?: boolean;
     onClick?: () => void;

package/index.js

@@ -1,16 +1,17 @@
 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, useCallback, useRef, Fragment as Fragment$1, createElement, useEffect, useContext, memo } from 'react';
+import React__default, { useState, forwardRef, useRef, Fragment as Fragment$1, useCallback, createElement, useEffect, useContext, memo } from 'react';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import EChart from 'echarts-for-react';
 import { v4 } from 'uuid';
 import { useMeasure, useCopyToClipboard, useKeyPressEvent } from 'react-use';
-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 { format, formatDistance } from 'date-fns';
 import { useSpring, animated } from '@react-spring/web';
 import usePortal from 'react-useportal';
 import { createPopper } from '@popperjs/core';
+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 { Helmet } from 'react-helmet';
 import { UNSAFE_NavigationContext } from 'react-router-dom';
 import ReactSelect, { components } from 'react-select';
@@ -18,7 +19,6 @@ export { default as ValueType } from 'react-select';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import ReactAsyncSelect from 'react-select/async';
-import { format, formatDistance } from 'date-fns';
 import { getColorValue } from '@trackunit/ui-design-tokens';
 
 const docs = {
@@ -1412,6 +1412,7 @@ const Chart = ({
   onBrush,
   onBrushSelected,
   mouseLeaveChart,
+  mouseMoveChart,
   merge = true,
   loadingOption,
   timezoneLabel,
@@ -1440,8 +1441,16 @@ const Chart = ({
       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]);
+  }, [onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart]);
   React.useEffect(() => {
     var _a;
 
@@ -1506,7 +1515,7 @@ const ChartContainer = tw.div`
  * @returns {JSX.Element} Label component
  */
 
-const Label$3 = ({
+const Label$2 = ({
   id,
   htmlFor,
   children,
@@ -1659,7 +1668,7 @@ const Checkbox = React.forwardRef((_a, ref) => {
       onKeyPress: onKeyPress
     }, {
       children: icon
-    })), label && jsx(Label$3, Object.assign({
+    })), label && jsx(Label$2, Object.assign({
       className: tws`cursor-pointer`,
       htmlFor: uuid,
       disabled: isReadonly,
@@ -1833,64 +1842,45 @@ const StyledCopyableText = tw.span`
   tu-copyable-text
   ${p => p.$animating ? tws`tu-copyable-text--animating` : null}`;
 
-const localeLookup = {
-  en: enGB,
-  "en-US": enUS,
-  "en-GB": enGB,
-  da,
-  de,
-  cs,
-  nl,
-  fr,
-  fi,
-  hu,
-  it,
-  nb,
-  pl,
-  pt,
-  ru,
-  ro,
-  es,
-  sv,
-  ja,
-  th
-};
 /**
- * A helper function to get the matching Locale object for a given language.
- *
- * @param {string} language The language to match
- * @returns {Locale} The corresponding Locale object
- */
-
-const useLocale = language => {
-  return localeLookup[language] || localeLookup.en;
-};
-
-/**
- * The DayPicker component is used when the user needs to select a date.
+ * A wrapper around BaseInput with a pop-up day picker.
  *
- * @param {DayPickerProps} props - The props for the DayPicker component
- * @returns {JSX.Element} DayPicker component
+ * NOTE: If shown with a label, please use the `DateField` component instead.
  */
 
-const DayPicker = _a => {
+const DateInput = forwardRef((_a, ref) => {
   var {
-    onDaySelect,
-    disabledDays,
-    selectedDays,
-    language
+    min,
+    max,
+    defaultValue,
+    value
   } = _a,
-      rest = __rest(_a, ["onDaySelect", "disabledDays", "selectedDays", "language"]);
+      rest = __rest(_a, ["min", "max", "defaultValue", "value"]);
 
-  const locale = useLocale(language);
-  return jsx(DayPicker$1, Object.assign({
-    onDayClick: onDaySelect,
-    selected: selectedDays,
-    locale: locale,
-    disabled: disabledDays,
-    className: "custom-day-picker"
+  const formatDateToInputString = date => date ? format(date, "yyyy-MM-dd") : date; // @ts-ignore
+  // Chrome needs it's default icon to have datepicker functionality.
+  // window.chrome doesn't exist in TS but is available on chrome browsers.
+  // If it fails it will just show our icon.
+
+
+  const hideOnChrome = () => window.chrome !== null && typeof window.chrome !== "undefined" ? "hidden" : "";
+
+  return jsx(BaseInput, Object.assign({
+    type: "date",
+    value: formatDateToInputString(value),
+    defaultValue: formatDateToInputString(defaultValue),
+    min: formatDateToInputString(min),
+    max: formatDateToInputString(max),
+    ref: ref,
+    suffix: jsx(Icon$1, {
+      dataTestId: "calendar",
+      name: "CalendarIcon",
+      size: "medium",
+      type: "solid",
+      className: hideOnChrome()
+    })
   }, rest));
-};
+});
 
 var PopoverLifecycle;
 
@@ -2096,101 +2086,6 @@ const StyledCardBody = twx(CardBody)`
   tu-popover-list-body
 `;
 
-/**
- * A wrapper around BaseInput with a pop-up day picker.
- *
- * NOTE: If shown with a label, please use the `DateField` component instead.
- */
-
-const DateInput = forwardRef((_a, ref) => {
-  var {
-    defaultValue,
-    disabledDays,
-    disabled,
-    preventDeselect,
-    onChange
-  } = _a,
-      rest = __rest(_a, ["defaultValue", "disabledDays", "disabled", "preventDeselect", "onChange"]);
-
-  const [selectedDay, setSelectedDay] = useState(defaultValue);
-  const onChangeHandler = useCallback(value => {
-    const newValue = (value === null || value === void 0 ? void 0 : value.toLocaleDateString()) === (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) && !preventDeselect ? undefined : value;
-    setSelectedDay(newValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-  }, [selectedDay, preventDeselect, onChange]);
-  const target = useRef(null);
-  const popover = useRef(null);
-  const {
-    popoverRef,
-    targetRef,
-    onShow,
-    onHide,
-    popoverProps
-  } = usePopover({
-    targetRef: target,
-    popoverRef: popover,
-    placement: "bottom"
-  });
-  return jsxs(Fragment, {
-    children: [jsx(BaseInput, Object.assign({
-      ref: ref,
-      value: (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) || "",
-      onChange: () => {}
-    }, rest, {
-      dataTestId: "dateInput",
-      onFocus: () => {
-        onShow();
-      },
-      nonInteractive: true,
-      suffix: jsx(Icon$1, {
-        dataTestId: "calendar",
-        name: "CalendarIcon",
-        size: "medium",
-        type: "solid",
-        onClick: !disabled ? onShow : undefined,
-        forwardedRef: targetRef
-      }),
-      actions: selectedDay && jsx(RemoveValueContainer, {
-        children: jsx(Button, Object.assign({
-          color: "tertiary",
-          onClick: e => {
-            e.preventDefault();
-            setSelectedDay(undefined);
-          }
-        }, {
-          children: jsx(Icon$1, {
-            name: "XIcon",
-            size: "small"
-          })
-        }))
-      }),
-      onClick: e => e.preventDefault()
-    })), jsx(AnimatedPopover, Object.assign({
-      ref: popoverRef,
-      onRequestClose: () => {
-        var _a;
-
-        onHide();
-        (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      }
-    }, popoverProps, {
-      children: jsx(PopoverList, Object.assign({
-        dataTestId: "datePickerPopover"
-      }, {
-        children: jsx(DayPicker, {
-          onDaySelect: onChangeHandler,
-          disabledDays: disabledDays,
-          selectedDays: selectedDay,
-          language: navigator.language
-        })
-      }))
-    }))]
-  });
-});
-const RemoveValueContainer = tw.div`
-tu-date__remove
-  `;
-
 /**
  * The PopoverListItem component.
  *
@@ -2428,7 +2323,7 @@ const FormGroup = ({
     "$disabled": disabled
   }, {
     children: [jsxs(ContainerBefore, {
-      children: [jsx(Label$3, Object.assign({
+      children: [jsx(Label$2, Object.assign({
         "data-testid": `${dataTestId}-label`
       }, {
         children: label
@@ -2516,6 +2411,65 @@ const DateField = forwardRef((_a, ref) => {
   }));
 });
 
+const localeLookup = {
+  en: enGB,
+  "en-US": enUS,
+  "en-GB": enGB,
+  da,
+  de,
+  cs,
+  nl,
+  fr,
+  fi,
+  hu,
+  it,
+  nb,
+  pl,
+  pt,
+  ru,
+  ro,
+  es,
+  sv,
+  ja,
+  th
+};
+/**
+ * A helper function to get the matching Locale object for a given language.
+ *
+ * @param {string} language The language to match
+ * @returns {Locale} The corresponding Locale object
+ */
+
+const useLocale = language => {
+  return localeLookup[language] || localeLookup.en;
+};
+
+/**
+ * The DayPicker component is used when the user needs to select a date.
+ *
+ * @param {DayPickerProps} props - The props for the DayPicker component
+ * @returns {JSX.Element} DayPicker component
+ */
+
+const DayPicker = _a => {
+  var {
+    onDaySelect,
+    disabledDays,
+    selectedDays,
+    language
+  } = _a,
+      rest = __rest(_a, ["onDaySelect", "disabledDays", "selectedDays", "language"]);
+
+  const locale = useLocale(language);
+  return jsx(DayPicker$1, Object.assign({
+    onDayClick: onDaySelect,
+    selected: selectedDays,
+    locale: locale,
+    disabled: disabledDays,
+    className: "custom-day-picker"
+  }, rest));
+};
+
 /**
  * The DayPickerPopover component returns a button which when clicked shows the daypicker.
  *
@@ -2665,7 +2619,7 @@ const Indicator$1 = _a => {
       children: [ping && jsx(Ping, {
         "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping"
       }), icon]
-    })), label !== undefined && withLabel && jsx(Label$2, Object.assign({
+    })), label !== undefined && withLabel && jsx(Label$1, Object.assign({
       "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label"
     }, {
       children: label
@@ -2723,6 +2677,24 @@ const Container$4 = tw.div`
     case colors.UNKNOWN:
       return tws`tu-indicator--unknown`;
 
+    case colors.ON_RENT:
+      return tws`tu-indicator--on-rent`;
+
+    case colors.AVAILABLE:
+      return tws`tu-indicator--available`;
+
+    case colors.PICKUP_READY:
+      return tws`tu-indicator--pickup-ready`;
+
+    case colors.TRANSFER:
+      return tws`tu-indicator--transfer`;
+
+    case colors.IN_REPAIR:
+      return tws`tu-indicator--in-repair`;
+
+    case colors.OTHER_RENTAL_STATUS:
+      return tws`tu-indicator--other-rental-status`;
+
     default:
       return "";
   }
@@ -2737,7 +2709,7 @@ const IconBackground = tw.div`
   return $withBackground ? "" : "tu-indicator__icon-background--none";
 }}
 `;
-const Label$2 = tw.div`
+const Label$1 = tw.div`
   tu-indicator__label
 `;
 const Ping = tw.span`
@@ -2763,16 +2735,17 @@ const LegendItem = ({
   const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
   return jsxs(Root$2, Object.assign({
     "data-testid": dataTestId,
-    disabled: disabled,
+    "$disabled": disabled,
     className: className,
-    selected: selected,
+    "$selected": selected,
     onClick: handleOnClick
   }, {
     children: [jsx(Indicator, {
       style: {
         backgroundColor: color
-      }
-    }), jsx(Label$1, {
+      },
+      "$selected": selected
+    }), label && jsx("p", {
       children: label
     })]
   }));
@@ -2784,19 +2757,18 @@ const Root$2 = tw.div`
   ease-in-out
   duration-200
   text-neutral-500
-  ${p => p.disabled ? tws`text-neutral-300` : p.selected ? tws`text-black` : tws`text-neutral-500`}
-  ${p => p.selected ? tws`font-medium` : null}
+  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.span`
-  block
+const Indicator = tw.div`
   w-3
   h-3
   rounded-[50%]
-  mr-2
-`;
-const Label$1 = tw.span`
-  text-sm
+  ${p => p.$selected ? tws`border border-black border-opacity-50` : null}
 `;
 
 /**
@@ -3363,7 +3335,7 @@ const RadioItem = ({
       "data-testid": dataTestId,
       "$checked": isChecked
     }), jsxs(LabelContainer$1, {
-      children: [jsx(Label$3, Object.assign({
+      children: [jsx(Label$2, Object.assign({
         htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${uuid}`,
         dataTestId: `${dataTestId}-Label`,
         disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
@@ -3425,7 +3397,7 @@ const SelectContainer$1 = ({
     "$hasError": hasError,
     "$isDisabled": isDisabled
   }, {
-    children: [label && !hideLabel && jsx(Label$3, Object.assign({
+    children: [label && !hideLabel && jsx(Label$2, Object.assign({
       htmlFor: id
     }, {
       children: label
@@ -4787,7 +4759,7 @@ const Toggle = React.forwardRef(({
         })
       }))]
     })), jsxs(LabelContainer, {
-      children: [jsx(Label$3, Object.assign({
+      children: [jsx(Label$2, Object.assign({
         htmlFor: id,
         dataTestId: `${dataTestId}-Label`,
         disabled: disabled
@@ -5353,4 +5325,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$3 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, activityColors, colors, criticalityColors, docs, generalColors, getOrderedOptions, getValueBarColorByValue, intentColors, isMultiValue, rentalStatusColors, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+export { ActionButton, Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, activityColors, colors, criticalityColors, docs, generalColors, getOrderedOptions, getValueBarColorByValue, intentColors, isMultiValue, rentalStatusColors, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.146",
+  "version": "0.0.151",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -9,10 +9,11 @@
     "react": "17.0.2",
     "@trackunit/ui-design-tokens": "0.0.43",
     "echarts-for-react": "^3.0.2",
+    "echarts": "^5.4.0",
     "uuid": "^8.3.2",
     "react-use": "^17.4.0",
-    "react-day-picker": "^8.3.0",
     "date-fns": "^2.29.3",
+    "react-day-picker": "^8.3.0",
     "@trackunit/ui-icons": "0.0.46",
     "react-useportal": "1.0.16",
     "react-helmet": "^6.1.0",