@trackunit/react-components 0.0.147 → 0.0.152

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/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/components/Popover/PopoverListItem.d.ts

@@ -20,7 +20,6 @@ export interface PopoverListItemProps extends CommonProps {
      * The child nodes.
      */
     children: React.ReactNode;
-    renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
 }
 /**
  * The PopoverListItem component.
@@ -28,4 +27,4 @@ export interface PopoverListItemProps extends CommonProps {
  * @param {PopoverListItemProps} props - The props for the PopoverListItem component
  * @returns {JSX.Element} PopoverListItem component
  */
-export declare const PopoverListItem: ({ selected, children, disabled, ariaLabel, url, onClick, prefix, suffix, renderAs, dataTestId, }: PopoverListItemProps) => JSX.Element;
+export declare const PopoverListItem: ({ selected, children, disabled, ariaLabel, url, onClick, prefix, suffix, dataTestId, }: PopoverListItemProps) => JSX.Element;

package/index.js

@@ -10,10 +10,10 @@ import { format, formatDistance } from 'date-fns';
 import { useSpring, animated } from '@react-spring/web';
 import usePortal from 'react-useportal';
 import { createPopper } from '@popperjs/core';
+import { Link, UNSAFE_NavigationContext } from 'react-router-dom';
 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';
 export { default as ValueType } from 'react-select';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
@@ -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,
@@ -2093,7 +2102,6 @@ const PopoverListItem = ({
   onClick,
   prefix,
   suffix,
-  renderAs,
   dataTestId
 }) => {
   const content = jsxs("div", Object.assign({
@@ -2118,9 +2126,8 @@ const PopoverListItem = ({
     "aria-label": ariaLabel,
     "data-testid": dataTestId
   }, {
-    children: url ? jsx(UnstyledAnchor, Object.assign({
-      "$as": renderAs,
-      href: url
+    children: url ? jsx(PopoverLink, Object.assign({
+      to: url
     }, {
       children: content
     })) : content
@@ -2135,7 +2142,7 @@ const ListItem = tw.li`
   tu-popover-list-item
   ${p => p.disabled && tws`tu-popover-list-item--disabled`}
 `;
-const UnstyledAnchor = tw.a`
+const PopoverLink = twx(Link)`
   tu-popover-list-item__anchor
 `;
 
@@ -2314,7 +2321,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
@@ -2610,7 +2617,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
@@ -2668,6 +2675,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 "";
   }
@@ -2682,7 +2707,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`
@@ -2708,16 +2733,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
     })]
   }));
@@ -2729,19 +2755,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}
 `;
 
 /**
@@ -3308,7 +3333,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,
@@ -3370,7 +3395,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
@@ -4732,7 +4757,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
@@ -5298,4 +5323,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.147",
+  "version": "0.0.152",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -9,6 +9,7 @@
     "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",
     "date-fns": "^2.29.3",
@@ -17,8 +18,8 @@
     "react-useportal": "1.0.16",
     "react-helmet": "^6.1.0",
     "@react-spring/web": "9.5.2",
-    "@popperjs/core": "^2.11.6",
     "react-router-dom": "6.4.1",
+    "@popperjs/core": "^2.11.6",
     "react-select": "^5.4.0",
     "jest-canvas-mock": "^2.4.0"
   },