@trackunit/react-components 0.0.172 → 0.0.174

package/components/PageHeader/PageHeader.d.ts

@@ -9,6 +9,10 @@ export interface PageHeaderProps extends CommonProps {
      * The description to be displayed inside the tip.
      */
     description?: string | React.ReactNode;
+    /**
+     * The link to which user is redirected to if user clicks on the tip.
+     */
+    link?: string;
     /**
      * Additional actions to be rendered along with the header.
      */
@@ -40,4 +44,4 @@ export interface PageHeaderProps extends CommonProps {
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-export declare const PageHeader: ({ className, dataTestId, action, showLoading, description, title, tag, backTo, children, }: PageHeaderProps) => JSX.Element;
+export declare const PageHeader: ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, children, }: PageHeaderProps) => JSX.Element;

package/components/Pagination/Pagination.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+export interface IPaginationProps {
+    /**
+     * A go to page handler
+     */
+    gotoPage: (index: number) => void;
+    /**
+     * A go to previous page handler
+     */
+    previousPage: () => void;
+    /**
+     * A a go to next page handler
+     */
+    nextPage: () => void;
+    /**
+     * A current page index
+     */
+    pageIndex?: number;
+    /**
+     * Amount of pages
+     */
+    pageCount?: number | null;
+    /**
+     * A flag to enable previous page button
+     */
+    canPreviousPage?: boolean;
+    /**
+     * A flag to enable next page button
+     */
+    canNextPage?: boolean;
+    /**
+     * A parent name
+     */
+    parentName: string;
+    /**
+     * A event name used for logging
+     */
+    eventName?: string;
+    /**
+     * A flag indicating loading state
+     */
+    loading?: boolean;
+    /**
+     * A custom class to override styles
+     */
+    className?: string;
+    /**
+     * A data test id
+     */
+    dataTestId?: string;
+    /**
+     * You can attach logging handler for page change
+     */
+    logPageChange?: (eventName: string, event: EventProperties) => void;
+    /**
+     * An helper to get translation for count.
+     */
+    getTranslatedCount: (count: number) => string;
+    /**
+     * An helper to get translation for page.
+     */
+    getTranslatedPage: () => string;
+}
+export declare type EventProperties = Record<string, string | number | boolean | null | undefined | (string | number)[]>;
+/**
+ * Pagination Description. It could be used when you need navigation for your paging feature.
+ *
+ * @param {IPaginationProps} props - The props for the Pagination component
+ * @returns {JSX.Element} Pagination component
+ */
+export declare const Pagination: ({ gotoPage, previousPage, nextPage, pageCount, pageIndex, canPreviousPage, canNextPage, loading, eventName, parentName, className, dataTestId, logPageChange, getTranslatedCount, getTranslatedPage, }: IPaginationProps) => JSX.Element;

package/components/Tip/Tip.d.ts

@@ -22,7 +22,7 @@ export interface TipProps extends CommonProps {
     /**
      * The href attribute if the tip is rendered as an anchor tag.
      */
-    link?: string | React.ReactNode;
+    link?: string;
 }
 /**
  * The Tip component is used to show helpful tips or contextual information to the users.

package/components/index.d.ts

@@ -22,6 +22,7 @@ export * from "./Modal";
 export * from "./NumberField/NumberField";
 export * from "./NumberInput/NumberInput";
 export * from "./PageHeader";
+export * from "./Pagination/Pagination";
 export * from "./Popover";
 export * from "./Prompt";
 export * from "./RadioGroup";

package/index.css

@@ -20,6 +20,7 @@
     px-2.5
     h-min
     w-min
+    max-h-8
     focus:ring
     focus:ring-offset-1
     focus:outline-none
@@ -46,15 +47,20 @@
   }
 
   &--full-width {
-    @apply w-full flex-auto;
+    @apply w-full
+      flex-auto;
   }
 
   &--small {
-    @apply py-1 px-2;
+    @apply py-1
+      px-2
+      max-h-7;
   }
 
   &--large {
-    @apply py-2 px-4;
+    @apply py-2
+      px-4
+      max-h-9;
   }
 
   &--primary {

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, useRef, Fragment as Fragment$1, useCallback, createElement, useEffect, useContext, memo } from 'react';
+import React__default, { useState, forwardRef, useRef, Fragment as Fragment$1, useCallback, createElement, memo, useEffect, useContext } from 'react';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import EChart from 'echarts-for-react';
 import { v4 } from 'uuid';
@@ -351,7 +351,7 @@ const Icon$1 = ({
       className: iconSizeClassName
     })
   }, {
-    children: jsx(Root$4, Object.assign({
+    children: jsx(Root$5, Object.assign({
       "$color": color,
       onClick: onClick,
       "data-testid": dataTestId,
@@ -370,7 +370,7 @@ const Icon$1 = ({
 const LoadingDot = tw.span`
   tu-loading-dot
 `;
-const Root$4 = tw.span`
+const Root$5 = tw.span`
   tu-icon
   ${({
   $color
@@ -1465,7 +1465,7 @@ const Label$2 = ({
   disabled,
   isInvalid
 }) => {
-  return jsx(Root$3, Object.assign({
+  return jsx(Root$4, Object.assign({
     id: id || "",
     htmlFor: htmlFor || "",
     className: className,
@@ -1476,7 +1476,7 @@ const Label$2 = ({
     children: children
   }));
 };
-const Root$3 = tw.label`
+const Root$4 = tw.label`
 tu-label
 ${({
   $disabled
@@ -2229,7 +2229,7 @@ const Tip = ({
   return jsx(TipContainer, Object.assign({
     "data-testid": dataTestId,
     "$as": renderAs,
-    href: ifAnchorTag() ? link === null || link === void 0 ? void 0 : link.toString() : undefined,
+    href: ifAnchorTag() ? link : undefined,
     target: ifAnchorTag() ? "_blank" : undefined,
     className: className
   }, {
@@ -2686,7 +2686,7 @@ const LegendItem = ({
   dataTestId
 }) => {
   const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
-  return jsxs(Root$2, Object.assign({
+  return jsxs(Root$3, Object.assign({
     "data-testid": dataTestId,
     "$disabled": disabled,
     className: className,
@@ -2703,7 +2703,7 @@ const LegendItem = ({
     })]
   }));
 };
-const Root$2 = tw.div`
+const Root$3 = tw.div`
   inline-flex
   items-center
   transition-all
@@ -3163,6 +3163,7 @@ const PageHeader = ({
   action,
   showLoading,
   description,
+  link,
   title,
   tag,
   backTo,
@@ -3189,14 +3190,14 @@ const PageHeader = ({
         }, {
           children: title
         })), description && jsx(StyledTip, Object.assign({
-          link: description,
+          link: isValidHttpUrl(link) ? link : undefined,
           dataTestId: `${dataTestId}-tip`,
           iconProps: {
             name: "QuestionMarkCircleIcon"
           },
-          renderAs: isValidHttpUrl(description) ? "a" : "span"
+          renderAs: link ? "a" : "span"
         }, {
-          children: isValidHttpUrl(description) ? "Learn more" : description
+          children: description
         }))]
       }), tag && jsx(Tag, Object.assign({
         dataTestId: dataTestId
@@ -3212,21 +3213,21 @@ const PageHeader = ({
   }));
 };
 
-const isValidHttpUrl = description => {
-  if (!description || typeof description !== "string") {
+function isValidHttpUrl(link) {
+  if (!link) {
     return false;
   }
 
   let url;
 
   try {
-    url = new URL(description);
+    url = new URL(link);
   } catch (_) {
     return false;
   }
 
   return url.protocol === "http:" || url.protocol === "https:";
-};
+}
 
 const StyledPageHeader = tw.div`
   tu-page-header
@@ -3244,7 +3245,240 @@ const ChildContainer = tw.div`
   tu-page-header__child-container
 `;
 const StyledTip = twx(Tip)`
-  ${p => isValidHttpUrl(p.link) ? tws`tu-page-header__tip` : null}
+  ${p => p.link ? tws`tu-page-header__tip` : null}
+`;
+
+/**
+ * Display placeholder lines before the data gets loaded to reduce load-time frustration.
+ */
+
+const SkeletonLines = memo(({
+  margin = "10px 0",
+  lines = 1,
+  height,
+  width = "100%",
+  className,
+  dataTestId
+}) => {
+  const skeletonLines = [];
+
+  const getWidth = index => {
+    if (width instanceof Array) {
+      return width[index] || "100%";
+    }
+
+    return width;
+  };
+
+  const getHeight = index => {
+    if (height instanceof Array) {
+      return height[index] || "auto";
+    }
+
+    return height;
+  };
+
+  for (let i = 0; i < lines; i++) {
+    skeletonLines.push(jsx(SkeletonLine, Object.assign({
+      "data-testid": dataTestId,
+      "data-type": "loading-skeleton-line",
+      className: className,
+      style: {
+        height: getHeight(i),
+        width: getWidth(i),
+        margin: margin
+      }
+    }, {
+      children: "\u00A0"
+    }), i));
+  } // eslint-disable-next-line react/jsx-no-useless-fragment
+
+
+  return jsx(Fragment, {
+    children: skeletonLines
+  });
+});
+const SkeletonLine = tw.div`
+  tu-skeleton-line
+`;
+
+/**
+ * Pagination Description. It could be used when you need navigation for your paging feature.
+ *
+ * @param {IPaginationProps} props - The props for the Pagination component
+ * @returns {JSX.Element} Pagination component
+ */
+
+const Pagination = ({
+  gotoPage,
+  previousPage,
+  nextPage,
+  pageCount,
+  pageIndex,
+  canPreviousPage,
+  canNextPage,
+  loading,
+  eventName,
+  parentName,
+  className,
+  dataTestId,
+  logPageChange,
+  getTranslatedCount,
+  getTranslatedPage
+}) => {
+  const [page, setPage] = React.useState(pageIndex);
+  const [pageInputValue, setPageInputValue] = React.useState(String(pageIndex !== undefined ? pageIndex + 1 : 1));
+
+  if (!loading && pageCount === undefined) {
+    throw Error("Pagination should be provided with a pageCount");
+  }
+
+  React.useEffect(() => {
+    if (pageIndex !== undefined && (isNaN(pageIndex) || pageIndex < 0)) {
+      gotoPage(0);
+    } else if (pageIndex !== undefined && pageCount !== null && pageCount !== undefined && pageIndex > pageCount - 1) {
+      gotoPage(pageCount - 1);
+    } else {
+      setPage(pageIndex);
+      pageIndex !== undefined && setPageInputValue(String(pageIndex + 1));
+    }
+  }, [pageIndex, gotoPage, setPage, setPageInputValue, pageCount]);
+  const parsePageString = React.useCallback(pageString => {
+    let val = parseInt(pageString);
+    val = isNaN(val) ? 0 : val;
+    val = val < 1 ? 0 : val - 1;
+
+    if (pageCount !== undefined && pageCount !== null) {
+      val = val > pageCount ? pageCount - 1 : val;
+    }
+
+    return val;
+  }, [pageCount]);
+  const handlePageChange = React.useCallback(action => {
+    const from = page;
+    let to = from;
+    let description = "";
+
+    switch (action) {
+      case "prev":
+        to = from !== undefined ? from - 1 : 0;
+        previousPage();
+        description = "Previous Page";
+        break;
+
+      case "next":
+        to = from !== undefined ? from + 1 : 0;
+        nextPage();
+        description = "Next Page";
+        break;
+
+      case "manual":
+        to = parsePageString(pageInputValue);
+        gotoPage(to);
+        description = "Manual Page Change";
+        break;
+    }
+
+    if (to) {
+      setPage(to);
+      setPageInputValue(String(to + 1));
+    }
+
+    eventName && logPageChange && logPageChange(eventName, {
+      parentName,
+      type: "Pagination",
+      from: from !== undefined ? from : "",
+      to: to !== undefined ? to : "",
+      action: description
+    });
+  }, [page, logPageChange, eventName, parentName, previousPage, nextPage, parsePageString, pageInputValue, gotoPage]);
+
+  const handleOnBlur = () => {
+    handlePageChange("manual");
+  };
+
+  const handleOnFocus = e => e.target.select();
+
+  const handleOnChange = React.useCallback(e => {
+    setPageInputValue(e.target.value);
+  }, []);
+  const handleOnKeyPress = React.useCallback(e => {
+    if (e.key !== "Enter") {
+      return;
+    }
+
+    handlePageChange("manual");
+  }, [handlePageChange]);
+
+  if (loading) {
+    return jsx(Root$2, Object.assign({
+      className: className
+    }, {
+      children: jsx(SkeletonLines, {
+        height: 16,
+        width: 150
+      })
+    }));
+  }
+
+  return jsxs(Root$2, Object.assign({
+    "data-testid": dataTestId,
+    className: className
+  }, {
+    children: [jsx(IconButton, {
+      onClick: () => handlePageChange("prev"),
+      disabled: page !== undefined && page <= 0,
+      "data-testid": "prev-page",
+      icon: jsx(Icon$1, {
+        name: "ChevronLeftIcon",
+        size: "small"
+      }),
+      size: "small",
+      color: "secondary",
+      variant: "transparent"
+    }), jsx(Text$1, {
+      children: getTranslatedPage()
+    }), jsx(PageInput, {
+      type: "number",
+      min: 1,
+      // max={amountOfPages}
+      value: pageInputValue,
+      onFocus: handleOnFocus,
+      onBlur: handleOnBlur,
+      onChange: handleOnChange,
+      onKeyPress: handleOnKeyPress,
+      "data-testid": "page-input"
+    }), jsx(TextStyled, Object.assign({
+      dataTestId: "page-count"
+    }, {
+      children: pageCount !== null && pageCount !== undefined && getTranslatedCount(pageCount)
+    })), jsx(IconButton, {
+      onClick: () => handlePageChange("next"),
+      disabled: page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1,
+      "data-testid": "next-page",
+      icon: jsx(Icon$1, {
+        name: "ChevronRightIcon",
+        size: "small"
+      }),
+      size: "small",
+      color: "secondary",
+      variant: "transparent"
+    })]
+  }));
+};
+const Root$2 = tw.div`
+tu-pagination
+`;
+const TextStyled = twx(Text$1)`
+  tu-pagination__text
+`;
+const PageInput = tw.input`
+ tu-pagination__page-input
+ [&::-webkit-inner-spin-button]:[-webkit-appearance:none]
+ [&::-webkit-outer-spin-button]:[-webkit-appearance:none]
+ [&::-webkit-inner-spin-button]:m-0
+ [&::-webkit-outer-spin-button]:m-0
+ [-moz-appearance:textfield]
 `;
 
 function useConfirmExit(confirmExit, when = true) {
@@ -4416,60 +4650,6 @@ const SelectContainer = tw.div`
 `;
 Select.displayName = "Select";
 
-/**
- * Display placeholder lines before the data gets loaded to reduce load-time frustration.
- */
-
-const SkeletonLines = memo(({
-  margin = "10px 0",
-  lines = 1,
-  height,
-  width = "100%",
-  className,
-  dataTestId
-}) => {
-  const skeletonLines = [];
-
-  const getWidth = index => {
-    if (width instanceof Array) {
-      return width[index] || "100%";
-    }
-
-    return width;
-  };
-
-  const getHeight = index => {
-    if (height instanceof Array) {
-      return height[index] || "auto";
-    }
-
-    return height;
-  };
-
-  for (let i = 0; i < lines; i++) {
-    skeletonLines.push(jsx(SkeletonLine, Object.assign({
-      "data-testid": dataTestId,
-      "data-type": "loading-skeleton-line",
-      className: className,
-      style: {
-        height: getHeight(i),
-        width: getWidth(i),
-        margin: margin
-      }
-    }, {
-      children: "\u00A0"
-    }), i));
-  } // eslint-disable-next-line react/jsx-no-useless-fragment
-
-
-  return jsx(Fragment, {
-    children: skeletonLines
-  });
-});
-const SkeletonLine = tw.div`
-  tu-skeleton-line
-`;
-
 /**
  * The TextArea is a base component, and should not be used very often.
  * For most cases the TextAreaField is the correct component.
@@ -5370,4 +5550,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$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeader, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, 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, 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$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeader, Pagination, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, 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, usePopover, usePrompt, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.172",
+  "version": "0.0.174",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -15,8 +15,8 @@
     "date-fns": "^2.29.3",
     "react-day-picker": "^8.3.0",
     "@trackunit/ui-icons": "0.0.48",
-    "react-useportal": "1.0.16",
-    "@react-spring/web": "9.5.2",
+    "react-useportal": "1.0.17",
+    "@react-spring/web": "9.5.4",
     "react-router-dom": "6.4.1",
     "@popperjs/core": "^2.11.6",
     "react-helmet": "^6.1.0",